@nxgt/material 3.7.1 → 3.7.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nxgt/material
 
+## 3.7.3
+
+### Patch Changes
+
+- [#1382](https://github.com/softistx/nxgt-material/pull/1382) [`c3be251`](https://github.com/softistx/nxgt-material/commit/c3be2515caaa2783167b7b1cac0183974ba9fc52) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the `ActivityLayout` `backdrop` scrolling along with the page. The layer is now `position: sticky` in the content column: as wide as the column, one viewport high, and it stays in the viewport while the content scrolls over it, in `scroll="document"` and `scroll="container"` alike. It still shows only inside the content column (not in the rail, the app bar's band or the gutters), and nothing changes without a `backdrop`.
+
+## 3.7.2
+
+### Patch Changes
+
+- [#1361](https://github.com/softistx/nxgt-material/pull/1361) [`4303761`](https://github.com/softistx/nxgt-material/commit/430376168103b49c0213cac6905b5497ef64b4c6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the chrome of an `ActivityLayout` with a `backdrop` letting the shapes run behind its text ([#1356](https://github.com/softistx/nxgt-material/issues/1356)). Under `data-backdrop`, the sidebar, the app bar, the breadcrumb, the tabs strip and the lists/tables (`DataTable`, `ServerTable`) take an opaque surface, tuned by `--nxgt-backdrop-chrome` (default `var(--background)`) and `--nxgt-backdrop-surface` (default `var(--card)`). Nothing changes without a `backdrop`.
+  
+  The backdrop layer now sits in the content column, and the frame's gutters take the chrome fill, so no shape is cut at the edges. `DataTable` and `ServerTable` keep their look without a backdrop with an equivalent class (`bg-[color:var(--nxgt-backdrop-fill-surface,color-mix(...80%...))]` in place of `bg-background/80`).
+
 ## 3.7.1
 
 ### Patch Changes

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

@@ -1,11 +1,24 @@
 /* ActivityLayout's `backdrop` prop: a node (a `Background` preset from
- * `@nxgt/material/backgrounds`) drawn behind the frame instead of the built-in
+ * `@nxgt/material/backgrounds`) drawn behind the content column 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. */
+ * is in the content column, positioned by classes in activity-layout.tsx: the
+ * 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:
+ *   --nxgt-backdrop-chrome   the sidebar, the app bar, the breadcrumb, the tabs
+ *                            strip (default: var(--background))
+ *   --nxgt-backdrop-surface  the lists and tables, their band and rows
+ *                            (default: var(--card))
+ * 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 gradient's own tint and blobs give way to the backdrop. */
 	[data-slot="activity-layout"][data-backdrop] {
@@ -21,4 +34,51 @@
 		width: 100%;
 		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));
+	}
+
+	/* 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"]
+		> *
+		> [data-slot="breadcrumb"] {
+		width: fit-content;
+		max-width: 100%;
+		padding-block: 0.25rem;
+		padding-inline-end: 0.75rem;
+		border-radius: 999px;
+		background: var(--nxgt-backdrop-fill-chrome);
+	}
+
+	/* Tabs: the strip is a band, its top corners rounded. (The segmented look
+	 * has its own track.) */
+	[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);
+	}
 }