@nxgt/material 3.32.1 → 3.33.0

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

@@ -17,6 +17,7 @@ either can be used alone.
 | <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band (a title and a description, or neither): sort, cursor paging, the empty page with a scene, an action and removable chips, one count announced |
 | <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, and `rowMenuColumn` to drop both in a table |
 | <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, with a scene and an action, or nothing matches and the way out |
+| <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"` |
 | <img src="../previews/data-table-filter-lists-datagrid.webp" width="96" alt=""> | [DataGrid](#datagrid) | An editable grid: spreadsheet keys, paste, a fill handle with series, undo, totals, saving with versions and conflicts (lazy ones fetch theirs on "Keep mine"), `onRefuse` for a refused paste or fill, row selection (`enableRowSelection`), and resizable, hideable and reorderable columns (`columnControls`, `columnLayout`, `DataGridColumnsMenu`) |
 | <img src="../previews/data-table-filter-lists-daygroupedlist.webp" width="96" alt=""> | [DayGroupedList](#daygroupedlist) | A list split by day under sticky Today / Yesterday / Earlier headings |
 | <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [Filter](#filter) | Schema-driven filters with chips, presets and persistence |
@@ -1057,6 +1058,47 @@ import { ListEmpty } from '@nxgt/material/components';
 
 ---
 
+## PageFooter
+
+![PageFooter](../previews/data-table-filter-lists-pagefooter.webp)
+
+The page footer of a feed that is not a table (a list of cards, a news feed) under a `FilterBar`: the range ("21–40 of 134") and Previous / Next as real links, so paging works with no JavaScript and on the server. It is the footer `ServerTable` draws, taking the same `pageInfo` and `totalCount`, with its hrefs built from the URL's cursor trail by `serverPagination` (`@nxgt/material-core/table-url`). It renders nothing for an empty result. Its props are `PageFooterProps`.
+
+```tsx
+import { FilterBar, PageFooter } from '@nxgt/material/components';
+
+<FilterBar model={model} />
+<ul>{items.map((item) => <li key={item.id}>{item.title}</li>)}</ul>
+<PageFooter
+  params={params}            // the page's URLSearchParams
+  pageInfo={data.pageInfo}   // { hasNextPage, endCursor }
+  totalCount={data.totalCount}
+  pageSize={20}
+  count={items.length}       // on a short last page
+  pageControls="icon"
+/>;
+```
+
+Previous exists when the URL has a trail; Next when `pageInfo` has a next page and an `endCursor`. An end with no page is a disabled button with `aria-disabled`, not a link. Previous and Next are named "Previous" / "Next", or "Previous page" / "Next page" with `pageControls="icon"` (`material.table.pagination.*` keys, as the table's).
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `params` | `URLSearchParams` | — | the page's search params: the trail is read from them and every other param is kept in the hrefs |
+| `pageInfo` | `{ hasNextPage, endCursor? }` | — | the connection's page info |
+| `totalCount` | `number` | — | items matching the query across every page |
+| `pageSize` | `number` | — | items per page; it places the range from the trail |
+| `count` | `number` | `pageSize` | items on this page, for a short last page |
+| `pageHref` | `(params) => string` | ``?${params}`` | a page's href |
+| `pagingNames` | `{ after?, trail? }` | `after`, `trail` | the cursor's search param names |
+| `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | icon-only controls with a tooltip; 44x44 boxes on a coarse pointer |
+| `live` | `boolean` | `true` | `false` renders the range as plain text instead of a polite live region |
+| `disabled` | `boolean` | `false` | makes Previous and Next inert while the feed loads |
+| `linkComponent` | `DataTableLinkComponent` | `<a>` | your router's link; it must forward `className` and `ref` |
+
+**Storybook:** `Data table, filter & lists/PageFooter`
+
+---
+
 ## DataGrid
 
 ![DataGrid](../previews/data-table-filter-lists-datagrid.webp)

package/docs/guides/backgrounds.md

@@ -553,6 +553,9 @@ good.
   it meets a text, a control or the inside of a surface. Use it on a dense page (stat cards, a list and a grid of cards
   24 to 32 px apart), where `true` leaves almost nothing. A glyph wider than the gap is dropped as before. See
   [Keep the backdrop clear of the content](./app-shell.md#keep-the-backdrop-clear-of-the-content).
+- **Control-like glyphs** (a plus, a bar or a triangle shape, an arrow, and icons named plus, minus, cross, arrow, chevron, angle or
+  caret) look like a button next to a surface, so in every mode but `false` they are dropped within 48 px of any card,
+  list, table, header band, app header or breadcrumb, and never stay in a gap. They still show in open areas, far from the content.
 - See [The theme's background](./app-shell.md#the-themes-background) for the shell and `AuthCard` in
   [navigation and layout](../components/navigation-and-layout.md#authcard) for the sign-in page.
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.32.1",
+	"version": "3.33.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -362,7 +362,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.38.0",
+		"@nxgt/material-core": "^0.39.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",