@nxgt/material 3.104.0 → 3.106.0

package/docs/components/data-table-filter-and-lists.md

@@ -97,6 +97,7 @@ table enables, for typing your own column defs.
 | `data` | `T[]` | — | rows; sorting, filtering and pagination run client-side |
 | `layout` | `'table' \| 'cards' \| 'tiles' \| { phone, wide }` | `'table'` | `'cards'` lays the rows out as a list of cards, `'tiles'` as one column in a single surface ([Cards and tiles](../guides/cards-and-tiles.md)); both ignore `virtual`, `renderExpandedRow` and `showViewOptions` |
 | `cardDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | `compact` fits cards of at least `--nxgt-cards-min` (15rem), up to four a row, with a tighter padding; `layout="cards"` only ([Cards and tiles](../guides/cards-and-tiles.md#columns)) |
+| `surface` | `'card' \| 'none'` | `'card'` | `'none'` drops the surface of a `cards` or `tiles` list so it sits on a card that already has one (no card in a card): the table's fill and padding go, tiles lose the list's border and corners (rows stay split by hairlines), cards lose their border and fill (one column stays split by hairlines) ([Cards and tiles](../guides/cards-and-tiles.md#inside-a-card)); the `table` layout ignores it |
 | `renderCard` | `(row, { Title, Actions, Row, selected, locked, reason }) => ReactNode` | — | a card's content, required with `layout="cards"`; `Title` is the card's one link and its name; `Actions` is the trailing action slot (outside the link, at least 44px); `Row` (the compact record row) is also passed, laid out inside the card's own padding, with no height of its own |
 | `renderTile` | `(row, { Title, Actions, Row, selected, locked, reason }) => ReactNode` | — | a tile's content, required with `layout="tiles"`; same `Title` as a card, or `Row`, the compact record row (title, subtitle, chips, trailing facts; see the cards and tiles guide) |
 | `renderExpandedRow` | `(row) => ReactNode` | — | makes rows expandable; pair with the `expand` column |

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

@@ -82,7 +82,7 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `items` | `MenuItem[]` | — | `label` (already translated), `url`, `icon`, `footer`, `display` (`'icon'`: a round icon-only button, the label as tooltip and name, in the rail and the expanded sidebar; the phone's menu sheet always shows icon and label; see the [app shell guide](../guides/app-shell.md)), `badge` (`true` a dot, a number a count up to "99+"), `badgeLabel` (see [Badges](../guides/app-shell.md#badges)), and `children` (read by `navigation="top"`, which opens them in a dropdown under a parent that is then only a trigger; by `navigation="two-level"`, which lists them in the panel beside the rail, one level deep; by the phone's menu sheet and the expanded sidebar, which nest them under the parent's own link, unless the entry sets `childrenIn: 'sidebar'`, which keeps them to the sidebar and the top dropdown), `childrenIn`, `defaultExpanded` (the expanded sidebar folds the entry's children from a chevron button, open at first when `true`, folded when `false`; unset, they are always listed), `group`, `bar`, `priority` for the navigation presets that read them (the drawer reads `group`, the bar `bar` and `priority`; the floating toolbar, not drawn yet, is the only preset still to read them) |
+| `items` | `MenuItem[]` | — | `label` (already translated), `url`, `icon`, `footer`, `display` (`'icon'`: a round icon-only button, the label as tooltip and name, in the rail and the expanded sidebar; the phone's menu sheet always shows icon and label; see the [app shell guide](../guides/app-shell.md)), `badge` (`true` a dot, a number a count up to "99+"), `badgeLabel` (see [Badges](../guides/app-shell.md#badges)), and `children` (read by `navigation="top"`, which opens them in a dropdown under a parent that is then only a trigger; by `navigation="two-level"`, which lists them in the panel beside the rail, one level deep; by the phone's menu sheet and the expanded sidebar, which nest them under the parent's own link, unless the entry sets `childrenIn: 'sidebar'`, which keeps them to the sidebar and the top dropdown), `childrenIn`, `defaultExpanded` (the expanded sidebar folds the entry's children from a chevron button, open at first when `true`, folded when `false`; unset, they are always listed), `persistKey` (remembers a collapsible group's fold state in this browser: a string key, or `true` to derive it from `navigation.persistKey` and the `url`), `badgeWhen` (`'collapsed'`: a collapsible group's own `badge` shows only while it is folded), `group`, `bar`, `priority` for the navigation presets that read them (the drawer reads `group`, the bar `bar` and `priority`; the floating toolbar, not drawn yet, is the only preset still to read them) |
 | `linkComponent` | `AppShellLinkComponent` | React Router `Link` | The link each menu entry renders, given `href`; see the [app shell guide](../guides/app-shell.md). Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 | `logo`, `name` | `AppLogo` (`ReactNode \| string \| AppLogoImage`, `AppLogoImage` = `{ src, alt? }`), `string` | — | the app's logo alone in the collapsed rail, named by `name` (also its tooltip); logo and name side by side in the phone's menu sheet |
 | `context` | `ReactNode` | — | a line at the top of the phone's menu sheet, above the brand: the current tenant's name; `name` stays the app's brand; `AppHeader` and `AppSidebar` take it too (see the [app shell guide](../guides/app-shell.md#the-brand-logo-and-name)) |

package/docs/guides/app-shell.md

@@ -129,6 +129,8 @@ type MenuItem = {
 `badge` marks an entry that has something new (the Material 3 navigation
 badge):
 
+(A collapsible sidebar group can show its own `badge` only while folded: see `badgeWhen` with `defaultExpanded`, below.)
+
 ```tsx
 const items: MenuItem[] = [
   { label: 'Home', url: '/', icon: 'house', badge: true },            // a dot
@@ -418,8 +420,26 @@ its `url`, with its badge, for a parent page that already lists them. Unset
 chevron button after the entry (named "Collapse the group" / "Expand the group",
 `material.navigation.group-collapse` and `group-expand`) shows and hides them,
 `true` opening them at first and `false` folding them (a folded group still opens at first when the current page is one of its children). It is ignored with `display: 'icon'`. Unset, they are always
-listed, as before. The entry stays a link to its `url`; the state is local (not
-remembered), and the phone's menu sheet and the other presets ignore it.
+listed, as before. The entry stays a link to its `url`, and the phone's menu sheet and the other presets ignore it.
+
+By default the fold state is local and resets on reload. `persistKey` remembers it
+in this browser: a string is the storage key, `true` derives the key from
+`navigation.persistKey` and the entry's `url` (nothing is saved without that key).
+Like the sidebar's own collapse, the saved choice is read after hydration, so a
+server render and the first client render both follow `defaultExpanded`; a saved
+choice wins over the "current page is a child" opening. `badgeWhen: 'collapsed'`
+draws the parent's `badge` only while the group is folded, so its children's own
+badges are not signalled twice (default `'always'`).
+
+```tsx
+{
+  label: 'Groups', url: '/groups', icon: 'users', badge: true,
+  children: [{ label: 'Item A', url: '/a', badge: 2 }],
+  defaultExpanded: true,
+  persistKey: true,        // under navigation.persistKey + '/groups'
+  badgeWhen: 'collapsed',  // the dot shows only while folded
+}
+```
 
 ```tsx
 {

package/docs/guides/cards-and-tiles.md

@@ -302,6 +302,26 @@ on the list or an ancestor to tune it. The default `comfortable` keeps the one,
 two, three columns above, whatever the token; tiles ignore `cardDensity`. It is
 independent of `density`, which also tightens a card's padding and gap.
 
+## Inside a card
+
+A list draws its own surface: tiles are one bordered, filled box, cards each have
+a border and a fill. Inside a page card or a `PanelCard` that is a card in a card.
+`surface="none"` leaves it out:
+
+```tsx
+<PanelCard title="Team">
+  <DataTable layout="tiles" surface="none" renderTile={…} … />
+</PanelCard>
+```
+
+The table's own fill and padding go, tiles lose the list's border and rounded
+corners (the rows stay split by hairlines), and cards lose their border and fill (in
+one column they are split by hairlines). Hover and selected tints, the padding and
+the focus ring are unchanged, so the rows sit directly on the parent card. The
+default (`'card'`) is unchanged, and the `table` layout ignores it. `ServerTable`
+has its own `surface` (for its root, with the tiles keeping their border) and does
+not pass this one on.
+
 ## States
 
 - **First load** (`loading` with no row): placeholder cards (or tiles), hidden from

package/lib/components/ui/collections/data-table/data-table-items-tiles.css

@@ -13,6 +13,15 @@
 		border: 1px solid var(--item-border);
 		border-radius: var(--item-radius);
 	}
+	/* `surface="none"`: no surface of its own, for a list inside a card. The
+	 * rows keep their hairlines; the tints still mix over the parent. */
+	[data-slot="data-table-tiles"][data-surface="none"] {
+		--item-surface: transparent;
+		margin: 0;
+		background: none;
+		border: 0;
+		border-radius: 0;
+	}
 	/* A ServerTable on a phone has no panel of its own: the tile list sits at
 	 * the page gutter, in line with the heading (#2292). */
 	@media (max-width: 767.98px) {
@@ -52,6 +61,11 @@
 		border-end-start-radius: calc(var(--item-radius) - 1px);
 		border-end-end-radius: calc(var(--item-radius) - 1px);
 	}
+	/* `surface="none"`: no rounded first and last row either. */
+	[data-slot="data-table-tiles"][data-surface="none"]
+	> [data-slot="data-table-item"] {
+		border-radius: 0;
+	}
 	[data-slot="data-table-tiles"][data-selectable]
 		> [data-slot="data-table-item"] {
 		padding-inline-start: 3.25rem;

package/lib/components/ui/collections/data-table/data-table-items.css

@@ -73,6 +73,12 @@
 			grid-template-columns: repeat(3, minmax(0, 1fr));
 		}
 	}
+	/* `surface="none"`: the list sits on its parent, with no padding of the
+	 * table's own to take the ring room's 4px back from. */
+	[data-slot="table-wrapper"]:has(> [data-surface="none"]) {
+		margin-inline: 0;
+		width: 100% !important;
+	}
 	[data-slot="data-table-cards"][data-density="compact"] {
 		gap: var(--nxgt-cards-gap, 0.5rem);
 	}
@@ -120,6 +126,22 @@
 		> [data-slot="data-table-item"] {
 		padding: 0.75rem;
 	}
+	/* `surface="none"`: a card draws no border or fill of its own, for a list
+	 * inside a card. In one column the cards are split by hairlines. */
+	[data-slot="data-table-cards"][data-surface="none"] {
+		--item-surface: transparent;
+	}
+	[data-slot="data-table-cards"][data-surface="none"]
+		> [data-slot="data-table-item"] {
+		border-color: transparent;
+	}
+	@container (max-width: 35.999rem) {
+		[data-slot="data-table-cards"][data-surface="none"]
+			> [data-slot="data-table-item"]
+			+ [data-slot="data-table-item"] {
+			border-top-color: var(--item-border);
+		}
+	}
 	[data-slot="data-table-item"] a[data-slot="data-table-item-link"],
 	[data-slot="data-table-item"] button[data-slot="data-table-item-link"] {
 		color: inherit;

package/package.json

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