@nxgt/material 3.105.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/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.105.0",
+	"version": "3.106.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"