@nxgt/material 3.7.1 → 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 layout. 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

@@ -512,18 +512,43 @@ export function Shell({ items }: { items: MenuItem[] }) {
   carries `data-backdrop`, and the built-in gradient (its tint and three blobs) is not drawn (plain
   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 everything.** The node is wrapped in a layer
-  (`[data-slot="activity-layout-backdrop"]`) that fills the layout, under the
-  sidebar, the header and the content. The layer is `inert`, `aria-hidden="true"`
+- **It sits behind the content column.** The node is wrapped in a layer
+  (`[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 layout.** 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 layout grows with the content, and so does the preset.
-- **Readable by design.** The frame keeps `bg-background-paper` and the sidebar
-  and header their `bg-background/40`, so the content reads over a busy preset.
-  Tone it down with the preset's `intensity` (`subtle`) rather than by
-  restyling the frame.
+- **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`. 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
+  pill as wide as its crumbs), the tabs strip, the lists and tables (band and
+  rows), the segmented `ToggleGroup`, the list bar and the phone tiles. Nothing
+  changes without a `backdrop`. Two tokens set the colours, on the layout (a
+  `className` such as `[--nxgt-backdrop-chrome:var(--muted)]`) or on any
+  ancestor:
+
+  | Token | Paints | Default |
+  | --- | --- | --- |
+  | `--nxgt-backdrop-chrome` | sidebar, app bar, breadcrumb, tabs strip | `var(--background)` |
+  | `--nxgt-backdrop-surface` | lists and tables (`DataTable`, `ServerTable`) | `var(--card)` |
+
+  ```tsx
+  <ActivityLayout
+    backdrop={<Background preset="shapes" />}
+    className="[--nxgt-backdrop-chrome:var(--card)] [--nxgt-backdrop-surface:var(--background)]"
+  >
+  ```
+
+  Give a colour, not a translucent one: a see-through surface lets the shapes
+  run behind the text again. Tone the preset down with its `intensity`
+  (`subtle`) rather than restyling the frame. The backdrop shows only inside
+  the content column (its layer is in the column, rounded like the frame): the
+  frame's padding, the gap beside the sidebar and the strip above the app bar
+  are the chrome colour, so no shape is cut at the edges.
 - **The stylesheet is yours to import.** `@nxgt/material/backgrounds` is a
   separate entry, so `ActivityLayout` never pulls it in: import it where you
   build the `backdrop`, and its `backgrounds.css` once.

package/docs/troubleshooting.md

@@ -60,6 +60,7 @@ words in your error.
 - [axe reports `target-size` on a control under a form's sticky actions](#axe-reports-target-size-on-a-control-under-a-forms-sticky-actions)
 - [`color-contrast` fails over the background blobs on phone](#color-contrast-fails-over-the-background-blobs-on-phone)
 - [`ActivityLayout`'s `backdrop` shows nothing, or the blobs are still there](#activitylayouts-backdrop-shows-nothing-or-the-blobs-are-still-there)
+- [Shapes of an `ActivityLayout` `backdrop` run behind the text of the chrome or a list](#shapes-of-an-activitylayout-backdrop-run-behind-the-text-of-the-chrome-or-a-list)
 - [Shaped Gallery tiles are plain rounded squares](#shaped-gallery-tiles-are-plain-rounded-squares)
 - [A component with my own tone (Shape, Fab, Avatar, StatCard, a metric card) shows no colour, or `tone` is a type error](#a-component-with-my-own-tone-shape-fab-avatar-statcard-a-metric-card-shows-no-colour-or-tone-is-a-type-error)
 - [A test expects the old `bg-muted` Avatar fallback, or a filled fallback shows a grey ring](#a-test-expects-the-old-bg-muted-avatar-fallback-or-a-filled-fallback-shows-a-grey-ring)
@@ -1323,6 +1324,21 @@ import { Background } from '@nxgt/material/backgrounds';
 import '@nxgt/material/backgrounds.css';
 ```
 
+### Shapes of an `ActivityLayout` `backdrop` run behind the text of the chrome or a list
+
+**When:** with `backdrop`, a breadcrumb, a tabs strip, a table or the sidebar
+shows the shapes through it, or you set a translucent colour and they come back.
+**Why:** under `data-backdrop` those surfaces take `--nxgt-backdrop-chrome` (default
+`var(--background)`) and `--nxgt-backdrop-surface` (default `var(--card)`); before
+3.7.2 they had no surface or a translucent one, and a custom `className` with its
+own `bg-*` on a list wins over the token.
+**Fix:** update `@nxgt/material`, and give the tokens opaque colours; drop a
+`bg-*/NN` class from the list's `className`.
+
+```tsx
+<ActivityLayout backdrop={<Background preset="shapes" />} className="[--nxgt-backdrop-surface:var(--background)]" />
+```
+
 ### A ResponsiveButton no longer shows its tooltip next to its visible label
 
 **When:** a `ResponsiveButton` with a `tooltip` on a desktop width (768 px and up, or `expanded`), where the tooltip used to appear beside the label.

package/lib/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);
+	}
 }

package/package.json

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