@nxgt/material 3.7.3 → 3.7.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nxgt/material
 
+## 3.7.5
+
+### Patch Changes
+
+- [#1389](https://github.com/softistx/nxgt-material/pull/1389) [`75789b7`](https://github.com/softistx/nxgt-material/commit/75789b79c2a3c90c0febbde8c6ed17a52b376695) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(app-shell): `ActivityLayout` with `scroll="document"` no longer lets the page scroll into the 8px gutter above the sticky app bar. A fixed gutter mask with the app bar's own fill (the chrome fill under a `backdrop`, the usual translucent background without one) covers the strip; at scroll top the layout looks as before.
+
+## 3.7.4
+
+### Patch Changes
+
+- [#1386](https://github.com/softistx/nxgt-material/pull/1386) [`ae0bd15`](https://github.com/softistx/nxgt-material/commit/ae0bd15881ad0d4e81bedb314e50bb3ac7d732e7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout` with a `backdrop`: the chrome is now lightly translucent and frosted instead of opaque, so a shape shows faintly behind the app bar, the breadcrumb and the tabs strip. The app bar is 80% of `--background`; the sidebar, the breadcrumb and the tabs strip are 87% (the least that keeps their text at WCAG AA over the darkest shape in the light theme); all sit over a 6px blur. Under `prefers-reduced-transparency: reduce`, or where `backdrop-filter` is unsupported, the blur is off and the fill is 92%. `--nxgt-backdrop-chrome` still overrides the fill, `--nxgt-backdrop-surface` and the lists, tables and cards stay opaque, and nothing changes without a `backdrop`.
+
 ## 3.7.3
 
 ### Patch Changes

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

@@ -9,21 +9,61 @@
  * frame's padding and gaps take the chrome fill, so the shapes show nowhere
  * else.
  *
- * The shapes show in the free content area only: every surface of the chrome and
- * of the lists is opaque, so none runs behind a text, an icon or a control. Two
- * tokens, set on the layout (or any ancestor), tune them:
+ * The chrome is lightly translucent and frosted: about 80% of the background
+ * colour (--nxgt-backdrop-chrome-alpha, the app bar) or 87% (--nxgt-backdrop-nav-alpha,
+ * the sidebar, the breadcrumb and the tabs strip, whose text needs it to keep
+ * WCAG AA over the darkest shape in the light theme) over a 6px blur
+ * (--nxgt-backdrop-blur), so a shape shows faintly behind them, too blurred to
+ * compete with a text. The lists, tables and cards stay opaque. Under `prefers-reduced-transparency:
+ * reduce`, or where `backdrop-filter` is unsupported, the blur is off and the
+ * fill is 92% (both). Two tokens, set on the layout (or any ancestor), tune them:
  *   --nxgt-backdrop-chrome   the sidebar, the app bar, the breadcrumb, the tabs
- *                            strip (default: var(--background))
+ *                            strip (default: the background at 80% / 92%)
  *   --nxgt-backdrop-surface  the lists and tables, their band and rows
- *                            (default: var(--card))
+ *                            (default: var(--card), opaque)
  * The sidebar, the app bar and the tables take theirs from a class whose
  * 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;
 	}
@@ -43,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) -
@@ -57,10 +96,48 @@
 	}
 
 	[data-slot="activity-layout"][data-backdrop] {
-		--nxgt-backdrop-fill-chrome: var(--nxgt-backdrop-chrome, var(--background));
+		--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;
+		--nxgt-backdrop-fill-chrome: var(
+			--nxgt-backdrop-chrome,
+			color-mix(
+				in oklab,
+				var(--background) var(--nxgt-backdrop-chrome-alpha),
+				transparent
+			)
+		);
+		--nxgt-backdrop-fill-nav: var(
+			--nxgt-backdrop-chrome,
+			color-mix(
+				in oklab,
+				var(--background) var(--nxgt-backdrop-nav-alpha),
+				transparent
+			)
+		);
 		--nxgt-backdrop-fill-surface: var(--nxgt-backdrop-surface, var(--card));
 	}
 
+	/* No blur to lean on: a more opaque fill instead. */
+	@supports not (
+			(backdrop-filter: blur(1px)) or
+			(-webkit-backdrop-filter: blur(1px))
+		) {
+		[data-slot="activity-layout"][data-backdrop] {
+			--nxgt-backdrop-chrome-alpha: 92%;
+			--nxgt-backdrop-nav-alpha: 92%;
+			--nxgt-backdrop-blur: 0px;
+		}
+	}
+	@media (prefers-reduced-transparency: reduce) {
+		[data-slot="activity-layout"][data-backdrop] {
+			--nxgt-backdrop-chrome-alpha: 92%;
+			--nxgt-backdrop-nav-alpha: 92%;
+			--nxgt-backdrop-blur: 0px;
+		}
+	}
+
 	/* The breadcrumb trail: a pill under the app bar, as wide as its crumbs. */
 	[data-slot="activity-layout"][data-backdrop]
 		[data-slot="activity-layout-frame"]
@@ -71,7 +148,9 @@
 		padding-block: 0.25rem;
 		padding-inline-end: 0.75rem;
 		border-radius: 999px;
-		background: var(--nxgt-backdrop-fill-chrome);
+		background: var(--nxgt-backdrop-fill-nav);
+		-webkit-backdrop-filter: blur(var(--nxgt-backdrop-blur));
+		backdrop-filter: blur(var(--nxgt-backdrop-blur));
 	}
 
 	/* Tabs: the strip is a band, its top corners rounded. (The segmented look
@@ -79,6 +158,8 @@
 	[data-slot="activity-layout"][data-backdrop] [data-slot="tabs-list"] {
 		border-start-start-radius: var(--radius);
 		border-start-end-radius: var(--radius);
-		background: var(--nxgt-backdrop-fill-chrome);
+		background: var(--nxgt-backdrop-fill-nav);
+		-webkit-backdrop-filter: blur(var(--nxgt-backdrop-blur));
+		backdrop-filter: blur(var(--nxgt-backdrop-blur));
 	}
 }