@nxgt/material 3.7.4 → 3.7.5

package/docs/guides/app-shell.md

@@ -690,7 +690,11 @@ you pass to `Toaster` replaces that default.
 - **The document scrolls.** The shell is `100%` wide and at least `100dvh`
   high, so it never adds a scrollbar's width of horizontal scroll and its
   bottom is never under a phone's toolbar. The page grows with the screen and
-  the browser scrolls it; the header and the desktop sidebar are sticky.
+  the browser scrolls it; the header and the desktop sidebar are sticky. The
+  strip above the sticky header is covered by a fixed, `aria-hidden`
+  `[data-slot="activity-layout-gutter"]` mask in the app bar's fill (under a
+  `backdrop`, the `--nxgt-backdrop-chrome` one), so the page never scrolls into
+  view there.
   `scroll="container"` is the opt-in for a screen that manages its own height
   (a full-height map, a board): the shell is then exactly `100dvh` high and
   the content region scrolls inside it.

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

@@ -25,10 +25,45 @@
  * fallback is their usual surface, through `--nxgt-backdrop-fill-*`: a utility
  * class outranks any rule in a layer, so a rule here could not set them. */
 @layer components {
+	/* The gutter mask without a backdrop (activity-layout.tsx) has the app bar's
+	 * translucent fill, which the page's top gutter never had: it fades in over
+	 * the first 8px of scroll, so at scroll top nothing changed. A browser
+	 * without scroll-driven animations shows it from the start. */
+	@keyframes nxgt-gutter-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	@supports (animation-timeline: scroll()) {
+		[data-slot="activity-layout"]:not([data-backdrop])
+			[data-slot="activity-layout-gutter"] {
+			animation: nxgt-gutter-in linear both;
+			animation-timeline: scroll(root block);
+			animation-range: 0px 8px;
+		}
+	}
+
 	/* The gradient's own tint and blobs give way to the backdrop. */
 	[data-slot="activity-layout"][data-backdrop] {
 		background-image: none;
 	}
+
+	/* scroll="document": the frame's chrome fill leaves its top gutter to the
+	 * gutter mask (activity-layout.tsx), a fixed strip with the same fill that
+	 * hides the scrolled page above the sticky app bar. Painting both would
+	 * stack two translucent fills there. */
+	[data-slot="activity-layout"][data-backdrop][data-scroll="document"]
+	[data-slot="activity-layout-frame"] {
+		background:
+			linear-gradient(
+				var(--nxgt-backdrop-fill-chrome),
+				var(--nxgt-backdrop-fill-chrome)
+			)
+			bottom / 100% calc(100% - var(--nxgt-backdrop-top)) no-repeat;
+	}
 	[data-slot="activity-layout"][data-backdrop] > [data-layer] {
 		display: none;
 	}
@@ -48,7 +83,6 @@
 	 * 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) -
@@ -62,6 +96,7 @@
 	}
 
 	[data-slot="activity-layout"][data-backdrop] {
+		--nxgt-backdrop-top: max(0.5rem, env(safe-area-inset-top));
 		--nxgt-backdrop-chrome-alpha: 80%;
 		--nxgt-backdrop-nav-alpha: 87%;
 		--nxgt-backdrop-blur: 6px;

package/package.json

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