@nxgt/material 3.7.2 → 3.7.3

package/docs/components/navigation-and-layout.md

@@ -81,7 +81,7 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `titleAs` | `'h1'` … `'h6'` \| `'div'` | `'h1'` | `ActivityContent`: the title's heading level |
 | `inset` | `boolean` | `false` | `ActivityContent`: pads the content 1rem on each side. Off, it lines up with the app bar and the cards |
 | `align` | `'start' \| 'center'` | `'start'` | `ActivityLayout`, `AppSidebar`: the collapsed rail's entries sit right under the brand, or `'center'` for centred in the height below it |
-| `backdrop` | `ReactNode` | — | `ActivityLayout`: a decorative background behind the frame, in place of the gradient and its blobs: a `Background` preset from `@nxgt/material/backgrounds`. Rendered in an `inert`, `aria-hidden` layer that fills the content column; the chrome and lists stay opaque over it, coloured by `--nxgt-backdrop-chrome` and `--nxgt-backdrop-surface`. See [Use a background preset behind the shell](../guides/app-shell.md#use-a-background-preset-behind-the-shell) |
+| `backdrop` | `ReactNode` | — | `ActivityLayout`: a decorative background behind the frame, in place of the gradient and its blobs: a `Background` preset from `@nxgt/material/backgrounds`. Rendered in an `inert`, `aria-hidden` layer as wide as the content column and one viewport high, fixed in the viewport while the content scrolls; the chrome and lists stay opaque over it, coloured by `--nxgt-backdrop-chrome` and `--nxgt-backdrop-surface`. See [Use a background preset behind the shell](../guides/app-shell.md#use-a-background-preset-behind-the-shell) |
 | `routeTransition` | `boolean \| Omit<ViewTransitionProps, 'children' \| 'ref'>` | `true` | `ActivityLayout`: React's `<ViewTransition>` around the content region, so a navigation cross-fades it. `false` renders none (your app has its own boundary); an object passes `default` / `update` classes, `name`, callbacks through. See [Route transitions](../guides/app-shell.md#route-transitions) |
 
 The active entry is the longest match across the whole menu, segment-aware.

package/docs/guides/app-shell.md

@@ -513,13 +513,15 @@ export function Shell({ items }: { items: MenuItem[] }) {
   CSS, no inline `style`). Without it the markup and the look are what they
   were; `null`, `undefined` and `false` count as none.
 - **It sits behind the content column.** The node is wrapped in a layer
-  (`[data-slot="activity-layout-backdrop"]`) that fills the column beside the
+  (`[data-slot="activity-layout-backdrop"]`) that spans the column's width beside the
   sidebar, under the app bar, the breadcrumb and the content. The layer is `inert`, `aria-hidden="true"`
   and takes no pointer, so the preset is decoration only: put nothing
   interactive in it.
 - **It fills the column.** A `Background` in the layer is sized to the layer,
-  not to `100lvw × 100lvh`, so you need no `className` or `fill`. In
-  `scroll="document"` the column grows with the content, and so does the preset.
+  not to `100lvw × 100lvh`, so you need no `className` or `fill`. The layer is
+  as wide as the column and one viewport high, and stays in the viewport while
+  the content scrolls over it, in `scroll="document"` (the page scrolls) and in
+  `scroll="container"` alike.
 - **The shapes stay in the free content area.** Under a `backdrop`, every
   surface of the chrome is opaque, so no shape runs behind a text, an icon or a
   control: the sidebar (over its full height), the app bar, the breadcrumb (a

package/lib/components/ui/layout/app-shell/activity-backdrop.css

@@ -35,6 +35,27 @@
 		height: 100%;
 	}
 
+	/* The layer is sticky, not absolute: it keeps the column's left and right
+	 * edges and stays in the viewport, from the app bar's top to the frame's
+	 * bottom padding, while the page (scroll="document") or the content region
+	 * (scroll="container") scrolls over it. It is the column's first child, so
+	 * a negative bottom margin (its height, and the column's 0.5rem gap) takes
+	 * it out of the flow: the app bar keeps its place. The offsets are the
+	 * frame's own padding and the app bar's sticky top. */
+	[data-slot="activity-layout-backdrop"] {
+		--nxgt-backdrop-top: max(0.5rem, env(safe-area-inset-top));
+		--nxgt-backdrop-height: calc(
+			100dvh -
+			var(--nxgt-backdrop-top) -
+			max(0.5rem, env(safe-area-inset-bottom)) -
+			var(--nxgt-media-dock, 0px)
+		);
+		position: sticky;
+		top: var(--nxgt-backdrop-top);
+		height: var(--nxgt-backdrop-height);
+		margin-bottom: calc(-1 * var(--nxgt-backdrop-height) - 0.5rem);
+	}
+
 	[data-slot="activity-layout"][data-backdrop] {
 		--nxgt-backdrop-fill-chrome: var(--nxgt-backdrop-chrome, var(--background));
 		--nxgt-backdrop-fill-surface: var(--nxgt-backdrop-surface, var(--card));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.7.2",
+	"version": "3.7.3",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"