@nxgt/material 3.24.1 → 3.25.0

package/docs/components/data-display.md

@@ -20,8 +20,9 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-statusindicator.webp" width="96" alt=""> | [StatusIndicator](#statusindicator) | Coloured status dot with a label |
 | <img src="../previews/data-display-summarydata.webp" width="96" alt=""> | [SummaryData](#summarydata) | Label / value pairs as a grid or inline |
 | <img src="../previews/data-display-description.webp" width="96" alt=""> | [Description](#description) | One read-only label / value pair |
+| <img src="../previews/data-display-descriptionlist.webp" width="96" alt=""> | [DescriptionList](#descriptionlist) | A dense auto-fill grid of label / value pairs in a `dl`, with a panels variant |
 | <img src="../previews/data-display-entityheader.webp" width="96" alt=""> | [EntityHeader](#entityheader) | Page header with status, metadata and actions |
-| <img src="../previews/data-display-listtile.webp" width="96" alt=""> | [ListTile](#listtile) | Row with leading / trailing slots and row actions |
+| <img src="../previews/data-display-listtile.webp" width="96" alt=""> | [ListTile](#listtile) | Row with leading / trailing slots, row actions, chips and a divided variant |
 | <img src="../previews/data-display-accordioncard.webp" width="96" alt=""> | [AccordionCard](#accordioncard) | Accordion rendered from `items` |
 | <img src="../previews/data-display-timeline.webp" width="96" alt=""> | [Timeline](#timeline) | Vertical event timeline with relative times |
 | <img src="../previews/data-display-eventchip.webp" width="96" alt=""> | [EventChip](#eventchip) | Calendar event pill, soft, solid or outlined |
@@ -456,6 +457,18 @@ import { StatCard } from '@nxgt/material/components';
 
 **`StatCardGroup`: an even grid of compact tiles.** Four hugging tiles leave an orphan at 360 px. Wrap the `size="sm"` tiles in a `StatCardGroup`: while the group is narrower than `md` (28 rem, its own width, not the window's) the tiles are two equal columns, 2×2 for four (an odd last tile takes the whole row); from there they are one row of tiles that hug their content, wrapping if they must. It takes the props of a `div`; the root is `data-slot="stat-card-group"` and `StatCardGroupProps` is exported. `EntityHeader`'s `stats` use it.
 
+**Beside a title, in a flex row.** The group is a size container, which counts for nothing in a flex row: it used to collapse to a few pixels, its tiles a character wide. It now keeps at least 16 rem (or its parent's width, if less) and grows into the row's free room, so it needs no `flex-1`, `min-w-*` or `basis-*` from you; in a block parent nothing changes. `align` places the tiles once the group is wider than they are: `'start'` (default) or `'end'`, against the group's end edge, without a selector into its children (`data-align` marks it). In a column (as `EntityHeader`'s body) pass `className="grow-0"`, since growing there would be in height. To let the group shrink below the 16 rem floor in a flex row, pass `className="min-w-0"`.
+
+```tsx
+<div className="flex flex-wrap items-center gap-4">
+  <h2>Class 6B</h2>
+  <StatCardGroup align="end">
+    <StatCard size="sm" label="Students" value={22} />
+    <StatCard size="sm" label="Classes" value={6} />
+  </StatCardGroup>
+</div>
+```
+
 ```tsx
 import { StatCard, StatCardGroup } from '@nxgt/material/components';
 
@@ -471,7 +484,7 @@ Parts: the root carries `data-slot="stat-card"`, `data-variant` and, when a tone
 
 In `filled`, the delta and its trend arrow take the on-colour too (the arrow and the sign still say up or down). The outline's share is `--stat-card-ring-share` (`68%`, or `--nxgt-tone-ring-share` for every ring); it draws the tonal card's border, the filled card's edge in a calm zone and the hairline round the icon chip. Known limit: the dark theme's primary `filled` card has an edge of about 2.3:1 on a `Card` and 2.5:1 on the page (its text is 7:1); a `tonal` card avoids it. See [App tones](../guides/theming.md#app-tones-on-shape-fab-avatar-statcard-and-the-metric-cards).
 
-**Storybook:** `Data display/StatCard/Group` (`GroupOnPhone`, `GroupOnDesktop`), `Data display/StatCard/Tones` · **Vue:** `StatCard` (`StatCardGroup` is React only for now)
+**Storybook:** `Data display/StatCard/Group` (`GroupOnPhone`, `GroupOnDesktop`), `Data display/StatCard/Group in a flex row`, `Data display/StatCard/Tones` · **Vue:** `StatCard` (`StatCardGroup` is React only for now)
 
 ---
 
@@ -620,15 +633,77 @@ import { Description } from '@nxgt/material/components';
 </div>
 ```
 
-`label` and `value` are its only props; the rest go to the `div`. A falsy
-`value` renders nothing, so optional fields need no guard. The label is a small
+`label` and `value` are its main props; the rest go to the `div`. A `value` of `null`, `undefined`, `false` or `''` renders nothing (`0` is shown), so optional fields need no guard. Inside a `variant="panels"` list a `Description` must sit in a `DescriptionList.Group`; otherwise it renders its stand-alone markup. The label is a small
 muted caption above the value (not a title). `Description` takes one cell of
-the grid it is in; pass `className="col-start-full"` for a full-width row.
+the grid it is in; pass `className="col-start-full"` for a full-width row. It takes `lines` anywhere; inside a [`DescriptionList`](#descriptionlist) also `span` and `labelPosition`.
 
 **Storybook:** `Data display/Description` · **Vue:** `Description`
 
 ---
 
+## DescriptionList
+
+![DescriptionList](../previews/data-display-descriptionlist.webp)
+
+A record's fields as a dense grid of `Description`s in a `dl`: label on top, hairlines, as many columns as fit.
+
+```tsx
+import { Description, DescriptionList } from '@nxgt/material/components';
+
+<DescriptionList meta="Added on 1 Mar 2026 · Modified on 2 Oct 2026">
+  <Description label="Full name" value={patient.name} />
+  <Description label="Birth date" value={patient.birthDate} />
+  <Description label="Address" lines={patient.addressLines} span="full" />
+  <Description label="Phone" value={patient.phone} />
+</DescriptionList>
+```
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `minItem` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` or a CSS length | `'md'` (14rem) | the narrowest a field gets: 10, 12, 14, 18 or 22rem |
+| `maxColumns` | `1`–`6` | `4` (`panels`: `3`) | the most columns |
+| `meta` | `ReactNode` | — | a muted line under the list |
+| `variant` | `'default' \| 'panels'` | `'default'` | `panels`: tonal groups |
+
+Columns are `auto-fill`, so three fields keep narrow, left-aligned columns on a
+wide screen instead of stretching, and there is one column on a phone. The
+layout is preset classes and CSS variables, so it works under a strict CSP; a
+CSS-length `minItem` sets one variable in a `style` attribute, so prefer a
+preset there. Fit three fields or thirty alike.
+
+`Description` takes two more props inside a list. `span` is `'full'` (the whole
+row) or a number of columns (used once that many fit; at most `maxColumns`, and
+4; with a CSS-length `minItem` the thresholds are those of `md`). `labelPosition` is `'top'` or `'inline'` (label beside the value). A full-width
+field uses dense packing: the fields after it fill the cells before it, so they
+may be drawn above it while the DOM and reading order stay the source order.
+Put the full-width field where that reads fine, or last. A multi-line value
+(an address) takes `lines={[…]}` or `children`, never a string to split. Entries of `lines` that are `null`, `false` or `""` are skipped, and a `Description` whose `lines` are all empty and that has no `value` renders nothing.
+
+```tsx
+<DescriptionList variant="panels">
+  <DescriptionList.Group title="Contact">
+    <Description label="Address" lines={['12 Sample Street', '75001 Exampleville']} />
+    <Description label="Phone" value={patient.phone} />
+  </DescriptionList.Group>
+  <DescriptionList.Group title="Coverage" headingLevel={2}>
+    <Description label="Insurer" value={patient.insurer} />
+  </DescriptionList.Group>
+</DescriptionList>
+```
+
+`variant="panels"` draws one tonal panel per `DescriptionList.Group` (a `div` with `role="group"`,
+not a landmark, named by its `title`, an `h3` unless `headingLevel` says otherwise, over its
+own `dl`) in a grid of at least 19rem and at most 3 columns. The label sits
+beside the value from the panel's own width (`@xs`, 20rem); `labelPosition`
+pins it. `title` is the heading and `headingLevel` (2 to 6, default 3) its level. `span` has no effect in a panel, and `maxColumns` is clamped to 1 to 6. In the default variant a `Group` only passes its fields through. In `panels`, put the fields in `DescriptionList.Group`s: a `Description` straight in a `panels` list (outside a Group) has no `dl` to sit in, so it falls back to its stand-alone markup.
+
+Each pair is a `div` holding a `dt` and a `dd`, valid inside the `dl`; a
+`Description` outside a `DescriptionList` keeps its plain markup.
+
+**Storybook:** `Data display/DescriptionList` · **Vue:** later ([#1614](https://github.com/softistx/nxgt-material/issues/1614))
+
+---
+
 ## EntityHeader
 
 ![EntityHeader](../previews/data-display-entityheader.webp)
@@ -736,10 +811,13 @@ A tile with an `href` ends with a discreet chevron after `trailing`: decorative
 | `linkComponent` | `AppShellLinkComponent` | plain `<a>` | the link element, as in the app shell: takes `href`, spreads every other prop, forwards `ref` |
 | `onClick` | `MouseEventHandler` | — | renders a `<button>` |
 | `selected` | `boolean` | `false` | the current row: drawn selected; a link gets `aria-current="page"` (your own `aria-current` replaces it), a button `aria-pressed` |
-| `toggle` | `Switch` props | — | makes the tile a switch row (see below): the whole row toggles a Switch at its end; `href`, `onClick`, `actions`, `chevron` and `linkComponent` are refused beside it by type |
-| `size` | `'sm' \| 'md'` | `'md'` | `sm` is the dense navigation row |
+| `toggle` | `Switch` props | — | makes the tile a switch row (see below): the whole row toggles a Switch at its end; `href`, `onClick`, `actions`, `chips`, `chevron` and `linkComponent` are refused beside it by type |
+| `size` | `'sm' \| 'md'` | `'md'` | `sm` is the dense row (with `chips`, the record row, see below) |
 | `leading`, `trailing`, `subtitle` | `ReactNode` | — | slots; `trailing` sits inside the link, so it holds decoration only |
 | `actions` | `ReactNode` | — | buttons at the end of the tile, outside the link, vertically centred (`data-slot="item-actions"`) |
+| `chips` | `ReactNode` | — | tags after the text, in the compact record row (see below); inside the link, so decoration only; part of the row's accessible name, keep labels short |
+| `variant` | `'tonal' \| 'divided'` | `'tonal'` | `divided`: flat rows with no tonal surface, a hover tint and the record-row layout; the hairline comes with `as="li"` |
+| `as` | `'li'` | — | renders the tile inside a `<li>`, for a `<ul>` you own |
 | `disabled` | `boolean` | — | disables the link or button, and the `actions` with it |
 
 With a router, pass `linkComponent` so a click navigates on the client instead of reloading the page (React Router's `Link` takes `to`, so wrap it):
@@ -776,6 +854,41 @@ export function SettingsRow() {
 }
 ```
 
+**A compact record row.** For a long list of records (patients, students), `chips` adds tags to the row and the tile lays itself out by its own width (a container query: the tile measures itself, so put it in a block, grid or `w-full` flex parent, not a box sized by its content):
+
+| Tile width | Layout |
+| --- | --- |
+| under 28rem (`@md`) | title, subtitle under it, chips under the subtitle; `actions` at the end |
+| 28rem and up | the subtitle sits on the title's line |
+| 36rem (`@xl`) and up | the chips sit after the text, before the chevron and the `actions` |
+
+`size="sm"` is the dense size, and `actions` stay last at every width. The chips sit inside the link (or button), so they are decoration, never buttons, and they form part of the row's accessible name: keep the chip labels short. On a coarse pointer, the buttons of `actions` at `size="sm"` keep the 44px hit area of an `IconButton` and are spaced so a neighbour never takes it. The 44px spacing applies to the record row (a tile with `chips` or `variant="divided"`); a tile without them renders the markup it always did. A switch row takes `variant` but not `chips`.
+
+```tsx
+import { MoreHorizontal } from 'lucide-react';
+import { Avatar, Chip, IconButton, ListTile } from '@nxgt/material/components';
+
+<ul aria-label="Patients" className="m-0 grid list-none gap-1 p-0">
+  <ListTile
+    as="li"
+    size="sm"
+    href="/patients/204-118"
+    title="Amara Okafor"
+    subtitle="54 y · MRN 204-118"
+    leading={<Avatar className="size-7 text-xs" tone="primary" fallback="AO" />}
+    chips={[
+      <Chip key="a" size="sm" color="error" label="Penicillin allergy" />,
+      <Chip key="d" size="sm" color="warning" label="Type 2 diabetes" />,
+    ]}
+    actions={<IconButton size="sm" aria-label="More for Amara Okafor"><MoreHorizontal /></IconButton>}
+  />
+</ul>
+```
+
+`variant="divided"` is the flat version for a denser page: no tonal surface, a hover tint and a hairline under each row. Give the `<ul>` no gap (`m-0 list-none p-0`); the hairline is drawn on the `<li>` of an `as="li"` tile, and the last row has none.
+
+**A list container: `as="li"`.** There is no `ListTileGroup`: `as="li"` on the tile and a `<ul>` of your own is the smaller API (the `<ul>` carries your `aria-label`, spacing and width, and the tile stays free of a context, so it still renders on the server alone). The `<li>` wraps the tile's own element, since a link or a button cannot be the `<li>`.
+
 **A selected link, for list-detail navigation.** Give `selected` from the router's location: the open row is a link (a shareable URL), `aria-current="page"` and drawn selected. Pass `aria-current="true"` when the selection is not a page.
 
 ```tsx
@@ -805,7 +918,7 @@ See also [A `ListTile` link reloads the whole page](../troubleshooting.md#a-list
 
 The root carries `data-slot="item-detail"` (a tile that is a button or a plain row too).
 
-**Storybook:** `Data display/ListTile`, `Data display/ListTile links`, `Data display/ListTile current` · **Vue:** `ListTile`
+**Storybook:** `Data display/ListTile`, `Data display/ListTile links`, `Data display/ListTile current`, `Data display/ListTile/Compact record row` · **Vue:** `ListTile`
 
 ---
 

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

@@ -883,7 +883,7 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `title` | `ReactNode` | — | the band's title (a string is an `<h2>`). Leave it out when the page's `h1` is elsewhere (the app bar's): the band then has no heading |
 | `description` | `ReactNode` | — | a muted line under the `title`, or alone above the band's controls without one; the `actions` stay at the band's end |
 | `actions` | `ReactNode` | — | the page's actions, at the band's end |
-| `bandDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | `'compact'` halves the room above the band (16px to 8px) and under it (12px to 6px), for a list under a sticky app bar and a breadcrumb; the controls keep their size (the Filter's own `density` is the controls') |
+| `bandDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | (the same prop as [`Filter`](#a-compact-band-for-a-list-inside-a-page-section)'s bar) `'compact'` halves the room above the band (16px to 8px) and under it (12px to 6px), for a list under a sticky app bar and a breadcrumb; the controls keep their size (the Filter's own `density` is the controls') |
 | `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | the footer's Previous / Next: `'icon'` is icon-only, with a tooltip and the names "Previous page" / "Next page" (`DataTable`'s default is unchanged); on a coarse pointer the icon controls are 44x44 boxes (still painted 32px) |
 | `bandActions` | `'stacked' \| 'inline'` | `'stacked'` | with `filter`, where `actions` sit below 768px: `'stacked'` gives them a row above the search; `'inline'` keeps them on the search's row (the search takes the room left), for a lone icon action such as a "+". An action wider than 3.5rem wraps under the search. From 768px both are the same |
 | `filterRef` | `Ref<ServerTableFilterHandle>` | — | with `filter`: `filterRef.current.focus()` focuses the Filter's first control, the search, else the first quick filter, "Add filter" or "Filters (N)" the width shows |
@@ -1251,10 +1251,28 @@ Its props are `FilterQueryProps`, its `variant` a `FilterQueryVariant`
 overload per kind, so `<Filter variant="bar" />` does not compile).
 `query` / `defaultQuery` + `onQueryChange` carry the user's query, never a
 locked condition; `density` (a `FilterDensity`: `'comfortable'` or
-`'compact'`), `label`, `searchLabel`, `searchPlaceholder`, `liveDelayMs`
+`'compact'`, the controls' size and the gap between them), `bandDensity`
+(`'comfortable'` or `'compact'`, the bar's own vertical room: see below), `label`, `searchLabel`, `searchPlaceholder`, `liveDelayMs`
 (200 ms), `searchApply` and `searchMinLength` tune it. A locked chip is a focusable group named by its text ("Year is 2026-2027"), with "Locked: <reason>" as its description. The other variants
 and `FilterProps` are unchanged.
 
+#### A compact band for a list inside a page section
+
+`bandDensity="compact"` is `ServerTable`'s prop, with the same values and the
+same spacing, on a standalone `Filter variant="bar"`: the bar takes 6px back
+under it (a `-mb-1.5`, the class `ServerTable`'s band uses), so a short list
+filtered with `matchQuery` inside a page section does not spend the room of a
+full page. The controls keep their size: `density` is theirs, and the two are
+independent. The default is unchanged, and a compact bar carries
+`data-band-density="compact"`. `variant="bar"` only; a `ServerTable` sets its
+own band with its own `bandDensity`.
+
+```tsx
+<Filter variant="bar" bandDensity="compact" density="compact" model={model} query={query} onQueryChange={setQuery} />
+```
+
+**Storybook:** `Data table, filter & lists/Filter/Bar/Band density`.
+
 #### The search: apply on Enter, a minimum length
 
 By default the search is live: the text reaches `onQueryChange` (and a

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

@@ -14,7 +14,8 @@ documentation-site shell. Everything is imported from
 | <img src="../previews/navigation-layout-topappbar.webp" width="96" alt=""> | [TopAppBar, BottomAppBar](#topappbar) | Top and bottom bars |
 | <img src="../previews/navigation-layout-breadcrumb.webp" width="96" alt=""> | [Breadcrumb](#breadcrumb) | Breadcrumb primitives |
 | <img src="../previews/navigation-layout-listdetailslayout.webp" width="96" alt=""> | [ListDetailsLayout, PaneLayout, ThreadLayout](#listdetailslayout) | Page layouts that adapt to phones |
-| <img src="../previews/navigation-layout-responsivegrid.webp" width="96" alt=""> | [ResponsiveGrid](#responsivegrid) | Container-query grid, 1 to 5 columns |
+| <img src="../previews/navigation-layout-responsivegrid.webp" width="96" alt=""> | [ResponsiveGrid](#responsivegrid) | Container-query grid, 1 to 5 columns, or `auto-fill` columns by a minimum tile width (`minItem`) |
+| <img src="../previews/navigation-layout-sectioncolumns.webp" width="96" alt=""> | [SectionColumns](#sectioncolumns) | Short page sections side by side from a viewport breakpoint, stacked below it |
 | <img src="../previews/navigation-layout-resizable.webp" width="96" alt=""> | [ResizableGroup](#resizablegroup) | Resizable panels |
 | <img src="../previews/navigation-layout-skiplink.webp" width="96" alt=""> | [SkipLink](#skiplink) | Skip-to-content link |
 | <img src="../previews/navigation-layout-pager.webp" width="96" alt=""> | [Pager](#pager) | Previous / next cards |
@@ -442,7 +443,7 @@ app bar.
 
 ![ResponsiveGrid](../previews/navigation-layout-responsivegrid.webp)
 
-Container-query grid that grows from 1 to 5 columns.
+Tiles in a grid that follows its own width: stepped columns from 1 to 5, or `auto-fill` columns by a minimum tile width.
 
 ```tsx
 import { ResponsiveGrid, StatCard } from '@nxgt/material/components';
@@ -452,12 +453,69 @@ import { ResponsiveGrid, StatCard } from '@nxgt/material/components';
   <StatCard label="Orders" value="1,284" />
   <StatCard label="Customers" value="812" />
 </ResponsiveGrid>
+
+// A board of small tiles: as many 12rem columns as fit, 1rem apart.
+<ResponsiveGrid minItem="sm" gap="md">
+  {rooms.map((room) => <RoomTile key={room.id} room={room} />)}
+</ResponsiveGrid>
 ```
 
-No props of its own. Columns follow the grid's own width, not the window's:
-2 from `@lg`, 3 from `@2xl`, 4 from `@4xl`, 5 from `@6xl`.
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `minItem` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| string` | none | Fill the row with tiles at least this wide: a preset (`xs` 10rem, `sm` 12rem, `md` 14rem, `lg` 18rem, `xl` 22rem, the same as `DescriptionList`) or a CSS length (`'9rem'`). Without it the columns step by width |
+| `gap` | `'sm' \| 'md' \| 'lg'` | `'sm'` | The space between tiles: 0.5rem, 1rem, 1.5rem |
+
+Without `minItem`, columns follow the grid's own width, not the window's: 2
+from `@lg`, 3 from `@2xl`, 4 from `@4xl`, 5 from `@6xl`. With it, the tracks
+are `repeat(auto-fill, minmax(min(<minItem>, 100%), 1fr))`: a few tiles keep
+their narrow width instead of stretching, and a wide screen gains columns
+(a 1920 px box holds eight `md` tiles). A preset is a class that sets a CSS
+variable; a custom length sets that variable in a `style` attribute (the
+variable only, never a grid style), so prefer a preset under a strict CSP
+(`style-src` without `'unsafe-inline'`). The `ResponsiveGrid` props are the
+`div`'s plus these two.
+
+**Storybook:** `Navigation & layout/ResponsiveGrid` · **Vue:** `ResponsiveGrid` (without `minItem` and `gap`)
+
+---
+
+## SectionColumns
+
+![SectionColumns](../previews/navigation-layout-sectioncolumns.webp)
+
+Short sections of a page side by side from a viewport breakpoint, stacked in source order below it: a record's contact beside its identifiers, its related people beside its allergies.
+
+```tsx
+import { SectionColumns } from '@nxgt/material/components';
+
+<SectionColumns from="2xl">
+  <section aria-labelledby="contact">
+    <h2 id="contact">Contact</h2>
+    …
+  </section>
+  <section aria-labelledby="identifiers">
+    <h2 id="identifiers">Identifiers</h2>
+    …
+  </section>
+</SectionColumns>
+```
 
-**Storybook:** `Navigation & layout/ResponsiveGrid` · **Vue:** `ResponsiveGrid`
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `from` | `'lg' \| 'xl' \| '2xl'` | `'2xl'` | The viewport breakpoint the sections sit side by side from: 1024, 1280 or 1536 px. Below it they stack, in source order |
+| `columns` | `2 \| 3` | `2` | Equal columns from `from`. A third column wants `2xl`: from `lg` it leaves each section about 20rem on a laptop |
+
+The columns are equal (`minmax(0, 1fr)`, so a wide child cannot push the page
+sideways) and the children keep their own height (`items-start`): a short
+section is not stretched to its neighbour's. The gap is 1rem. It is a plain
+`div`, **not a landmark**: each child keeps its own heading (a `section` with
+`aria-labelledby`, or a heading in a `div`), and it adds no region of its own.
+It follows the **viewport**, not its container: for tiles that follow their
+box use [ResponsiveGrid](#responsivegrid) with `minItem`, and for one side
+panel beside a page use `ActivityContent`'s `aside`. It takes the `div`'s
+props, so `className` adds to it.
+
+**Storybook:** `Navigation & layout/SectionColumns` · **Vue:** later ([#1614](https://github.com/softistx/nxgt-material/issues/1614))
 
 ---
 

package/docs/guides/app-shell.md

@@ -888,6 +888,49 @@ decides the layout.
 - **Width token.** `--nxgt-aside-width` changes `asideWidth="md"` (20rem) app-wide;
   any CSS length goes in `asideWidth` for one screen.
 
+## Dense pages on large screens
+
+On a 1440 or 1920 px screen a page should show more, not stretch the same four
+fields wider. Four components do it together, each measuring its own space, and
+the `Dense detail page` recipe (`Guides/Recipes` in Storybook, `screen-recipes`
+in the plugin) assembles them for any record: a patient, a student, a project.
+
+| The block is | Use | Behaviour |
+| --- | --- | --- |
+| a record's fields | [`DescriptionList`](../components/data-display.md#descriptionlist) | `auto-fill` columns of at least `minItem` (14rem), at most `maxColumns` (4); one column on a phone; `variant="panels"` for titled groups |
+| short sections of a page | [`SectionColumns`](../components/navigation-and-layout.md#sectioncolumns) | side by side from `from` (`2xl`, 1536px, by default), stacked in source order below it |
+| a board of small tiles | [`ResponsiveGrid minItem`](../components/navigation-and-layout.md#responsivegrid) | more columns as the box widens, no stretching |
+| the rows of a long list | [`ListTile`](../components/data-display.md#listtile) `size="sm" as="li"` with `chips` | subtitle on the title's line from 28rem, chips after the text from 36rem |
+| the filter above such a list | [`Filter`](../components/data-table-filter-and-lists.md#filter) `variant="bar" bandDensity="compact"` | 6px less under the bar; `density` stays the controls' size |
+
+```tsx
+<ActivityContent hideHeader>
+  <EntityHeader title={record.name} stats={stats} metadata={facts} />
+  <DescriptionList meta="Added on … · Modified on …">
+    {fields.map((f) => <Description key={f.label} label={f.label} value={f.value} />)}
+  </DescriptionList>
+  <SectionColumns>
+    <section aria-labelledby="visits">
+      <h2 id="visits">Visits</h2>
+      <Filter variant="bar" bandDensity="compact" model={model} query={query} onQueryChange={setQuery} />
+      <ul className="m-0 grid list-none gap-1 p-0">
+        {rows.map((r) => <ListTile key={r.id} as="li" size="sm" title={r.title} chips={<Chip size="sm" label={r.kind} />} href={r.href} />)}
+      </ul>
+    </section>
+    <section aria-labelledby="notes">…</section>
+  </SectionColumns>
+</ActivityContent>
+```
+
+- **One `h1`**: the `EntityHeader`'s title, or the shell's `handle.title` (then
+  leave `title` out). Each section keeps its own `h2`; `SectionColumns` is a
+  plain `div`, not a landmark.
+- **Viewport against container**: `SectionColumns` and `asideFrom` follow the
+  window, while `DescriptionList`, `ListTile` and `ResponsiveGrid` follow their
+  own box, so the same list works in a column, a dialog or a side panel.
+- **Check it** at 360, 768, 1440 and 1920 px, light and dark: no sideways
+  overflow, and no column of empty space beside a short list.
+
 ## Breadcrumbs
 
 `AppBreadcrumb` (rendered by `ActivityLayout`) starts with a home icon linking

package/docs/roadmap.md

@@ -6,6 +6,20 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
+- **Dense pages on large screens** — a record's page shows more on a 1440 or
+  1920 px screen instead of stretching the same fields. `DescriptionList` lays
+  a record's fields in `auto-fill` columns (`minItem`, `maxColumns`, a `meta`
+  line, `span`, `lines`, and `variant="panels"` for titled groups);
+  `SectionColumns` puts short sections side by side from a breakpoint (1536 px
+  by default) and stacks them below it; `ResponsiveGrid` takes `minItem` and
+  `gap` for boards of tiles; `ListTile` becomes a compact record row with
+  `chips`, `variant="divided"` and `as="li"`; `Filter` takes `bandDensity` like
+  `ServerTable`; `StatCardGroup` no longer collapses in a flex row and takes
+  `align`. The `Dense detail page` recipe puts them together for any subject,
+  tested at 360, 768, 1440 and 1920 px. React only for now; the Vue gap is
+  tracked in issue #1614.
+  ([App shell guide](guides/app-shell.md#dense-pages-on-large-screens))
+
 - **Vector drawings in code** (in the next prerelease) — `@nxgt/material/draw`
   draws a scene of plain data, or JSX primitives (`Rect`, `Path`, `Text`...), as
   SVG that follows the theme: colours are Material 3 roles and tones, with no

package/package.json

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