@nxgt/material 3.24.0 → 3.25.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @nxgt/material
 
+## 3.25.0
+
+### Minor Changes
+
+- [#1610](https://github.com/softistx/nxgt-material/pull/1610) [`67aa08c`](https://github.com/softistx/nxgt-material/commit/67aa08c7876b2325e3d99993ea2ecbecca7da6ba) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Filter variant="bar"` takes `bandDensity: 'comfortable' | 'compact'`, the same values and spacing as `ServerTable`'s: `'compact'` takes 6px back under the bar (the band class both share), and `density` stays the controls' size. `StatCardGroup` no longer collapses in a flex row (it keeps at least 16 rem and grows into the free room) and takes `align: 'start' | 'end'` for its tiles.
+  
+  For existing users: a `StatCardGroup` inside a `flex-col` parent: add `className="grow-0"`; one that must shrink below 16rem in a flex row: add `className="min-w-0"`.
+
+- [#1603](https://github.com/softistx/nxgt-material/pull/1603) [`da60d84`](https://github.com/softistx/nxgt-material/commit/da60d84a0c98326addb0f88e75343df4610c995a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `DescriptionList`: a dense grid of `Description`s in a `dl` for a record's fields. Columns are `auto-fill` (so a short list stays narrow and left-aligned), at least `minItem` wide (a preset `xs` to `xl` or a CSS length, default 14rem) and at most `maxColumns` (default 4), one column on a phone; the label sits on top over hairlines, and `meta` adds a muted line such as "Added on … · Modified on …". `variant="panels"` with `DescriptionList.Group title` draws tonal panels (19rem minimum, three columns at most) whose label goes beside the value from the panel's width. `Description` gains `span` (`'full'` or a number of columns; a full-width field uses dense packing, so the fields after it fill the cells before it), `labelPosition` (`'top'` or `'inline'`) and `lines` for a multi-line value; inside a `DescriptionList` it is a `div` of `dt` and `dd`, and outside one it keeps its markup (so does a `Description` in a `panels` list but outside a `DescriptionList.Group`). Refs [#1595](https://github.com/softistx/nxgt-material/issues/1595).
+
+- [#1605](https://github.com/softistx/nxgt-material/pull/1605) [`e03f524`](https://github.com/softistx/nxgt-material/commit/e03f524c90d5e2d8ae04e8dc9790a943c18c82df) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ListTile` becomes a compact record row. `chips` (a slot, usually `<Chip size="sm">`s) puts tags after the text: from a tile width of 28rem (`@md`) the subtitle sits on the title's line, from 36rem (`@xl`) the chips sit after the text and wrap under it below that, and `actions` stay last (a container query on the tile, CSS only). `variant="divided"` draws flat rows with no tonal surface and a hover tint, hairlines on the `<li>` of an `as="li"` tile; `as="li"` renders the tile inside a `<li>` for a `<ul>` you own. In the record row at `size="sm"` the `actions` keep the 44px hit area of an IconButton on a coarse pointer, spaced so that neighbours do not take it. A tile without `chips`, `variant` and `as` renders the same markup as before. Refs [#1596](https://github.com/softistx/nxgt-material/issues/1596).
+
+- [#1608](https://github.com/softistx/nxgt-material/pull/1608) [`e51db09`](https://github.com/softistx/nxgt-material/commit/e51db096919d695909ac12bbfe5675b146fe55e8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ResponsiveGrid` takes `minItem` (a preset `xs` 10rem, `sm` 12rem, `md` 14rem, `lg` 18rem or `xl` 22rem, the same as `DescriptionList`, or a CSS length) and fills the row with `auto-fill` columns at least that wide, so a board of small tiles gains columns on a wide screen instead of stretching; `gap` (`sm` 0.5rem, `md` 1rem, `lg` 1.5rem) sets the space between tiles. A preset is a class setting a CSS variable and a length sets only that variable, so a strict CSP keeps the layout; without `minItem` the stepped columns and `gap-2` are unchanged. New `SectionColumns` lays short page sections side by side from a viewport breakpoint (`from`: `lg`, `xl` or `2xl`, default `2xl`) in `columns` equal columns (`2` or `3`, default `2`) and stacks them in source order below it; the sections keep their own height, and it is a plain `div`, not a landmark. Refs [#1553](https://github.com/softistx/nxgt-material/issues/1553), [#1597](https://github.com/softistx/nxgt-material/issues/1597).
+
+## 3.24.1
+
+### Patch Changes
+
+- [#1623](https://github.com/softistx/nxgt-material/pull/1623) [`ea8e6d3`](https://github.com/softistx/nxgt-material/commit/ea8e6d39d41b8fa9a0c3ca6201fb983a647c87a0) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix: `NativeSelect` shrank to the width of its selected option while the other fields (`TextField`, `SelectField`, `ComboboxField`) filled their column. It fills its container now, like them, in a form grid, a `FormSection`, a flex row and a phone column. `SelectField` and the `Select` trigger already filled it, and a long selected label ends in an ellipsis without widening the column; a story now measures all of them against a `TextField`, at 360 and 1440 px, light and dark. A `NativeSelect` that must stay compact (a toolbar, a page-size picker) takes a width class, such as `className="w-fit"` or `w-24`: the wrapper and the chevron follow it. See the troubleshooting entry.
+
 ## 3.24.0
 
 ### Minor Changes

package/README.md

@@ -457,7 +457,7 @@ links to its entry in [`docs/components/`](https://cdn.jsdelivr.net/npm/@nxgt/ma
 preview, an example and the options that matter. In the
 *Component* column, `·` separates a field from its React Hook Form wrapper.
 The last column gives the matching export in `@nxgt/material-vue`, or `—` when
-Vue has none. "(same parts)" means Vue exports the same sub-components.
+Vue has none. `— (later, #N)`: planned, tracked in the issue. "(same parts)" means Vue exports the same sub-components.
 
 Icons in the previews: Font Awesome Free 7.3.1 by Fonticons, Inc., CC BY 4.0 — https://fontawesome.com/license/free
 React-only today: `Combobox` (not planned in Vue), `StepperIndicator`, and for now `Fab`, `FabDock`, `FabMenu`, `Toolbar` and `ToolbarPair` (#866); Vue's `SplitButton` keeps the earlier look until then.
@@ -600,14 +600,15 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-dayseparator.webp" width="120" alt="DaySeparator"> | [`DaySeparator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#dayseparator), `isNewDay`, `formatDayLabel` | "Today", "Yesterday", the weekday or the date between two hairlines, in the provider's language; sticky if asked. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-periodcards.webp" width="120" alt="PeriodCards"> | [`PeriodCards`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#periodcards) | Consecutive date ranges (terms, sprints) as cards: a "Current" marker with `aria-current`, a link over each card, as many 14rem columns as fit (one on a phone). | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-chip.webp" width="120" alt="Chip"> | [`Chip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#chip) | Compact pill in three looks (hairline, soft, tag) and a dashed add pill, with leading, avatar and trailing slots, a selected state and a dismiss button; a coloured soft chip reads as a status (the tone's container, its text colour on it). | `Chip` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statcard.webp" width="120" alt="StatCard"> | [`StatCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statcard) | KPI tile with value, hint, icon, toned delta and a loading skeleton; `tone` and `variant` (`outlined`, `tonal`, `filled`) colour it, `valueSize` enlarges the value, `size="sm"` makes a compact tile (it ignores `hint`, `delta` and `valueSize`); `StatCardGroup` lays compact tiles 2×2 on a phone and in a row beside. | `StatCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statcard.webp" width="120" alt="StatCard"> | [`StatCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statcard) | KPI tile with value, hint, icon, toned delta and a loading skeleton; `tone` and `variant` (`outlined`, `tonal`, `filled`) colour it, `valueSize` enlarges the value, `size="sm"` makes a compact tile (it ignores `hint`, `delta` and `valueSize`); `StatCardGroup` lays compact tiles 2×2 on a phone and in a row beside, holds its width in a flex row, and `align="end"` sets them against its end edge. | `StatCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-metric-cards.webp" width="120" alt="TrendCard"> | [`TrendCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#metric-cards), `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard`, `Sparkline` | Dashboard tiles including compare, heat, funnel, gauge, spark bars, delta list, range band, latency, ratio, threshold, pace and labelled histogram. Container queries. A `tone` (named, or your app's) draws the accent in it; deltas and breaches stay semantic. | `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-card-presets.webp" width="120" alt="FeatureCard"> | [`FeatureCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#card-presets), `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` | Card presets including overlay, ticket, inbox, event, stack, link, album, tags, receipt, review, offer, place, file, status, score, shortcuts and checklist. Container queries. | `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statusindicator.webp" width="120" alt="StatusIndicator"> | [`StatusIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statusindicator) | Coloured status dot with an optional pulse and label. | `StatusIndicator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-summarydata.webp" width="120" alt="SummaryData"> | [`SummaryData`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#summarydata) | Label / value pairs as a grid or inline; hides empty values. | `SummaryData` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-description.webp" width="120" alt="Description"> | [`Description`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#description) | Read-only label / value pair that renders nothing when empty. | `Description` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-descriptionlist.webp" width="120" alt="DescriptionList"> | [`DescriptionList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#descriptionlist), `DescriptionList.Group` | Dense auto-fill grid of `Description`s in a `dl` (`minItem`, `maxColumns`, `meta`, `span`, `labelPosition`, `lines`), or tonal panels per group with `variant="panels"`. | — (later, [#1614](https://github.com/softistx/nxgt-material/issues/1614)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, a `leading` control slot (a Switcher at the band's start), title (`headingLevel` 1 to 3), status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles, 2×2 on a phone) and actions. | `EntityHeader` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron; `selected` sets `aria-current="page"`), a button, or with `toggle` a switch row where the whole row toggles. `size="sm"` is the dense row. | `ListTile` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron; `selected` sets `aria-current="page"`), a button, or with `toggle` a switch row where the whole row toggles. `size="sm"` is the dense row; `chips` and `variant="divided"` make it a compact record row, `as="li"` puts it in a list. | `ListTile` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#eventchip) | Calendar event pill — soft, solid or outlined — with its times, all-day and continuation edges. | `EventChip` |
@@ -631,7 +632,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listempty.webp" width="120" alt="ListEmpty"> | [`ListEmpty`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listempty) | A list's empty page: nothing yet (a title, or a scene, a line and an action), or nothing matches with what narrows it and a way out (a button or a link); its title is an `h2` (`headingLevel`). | `ListEmpty` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datagrid.webp" width="120" alt="DataGrid"> | [`DataGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datagrid) | An editable grid over `DataTable`'s columns: spreadsheet keys, a selected range, editors for text, numbers (with codes such as "abs"), options, dates and checkboxes, or your own; paste from Excel or Sheets, a fill handle that continues series, resizable, hideable and reorderable columns, undo, totals, and saving per cell, per row or in a batch with versions and conflicts ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/data-grid.md)). Long grids render only what is in view; on a phone it is a list of rows that open a panel. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-daygroupedlist.webp" width="120" alt="DayGroupedList"> | [`DayGroupedList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#daygroupedlist), `groupByDay` | A list split by day — Today, Yesterday, This week, Earlier — under headings that stick while their items scroll. | — (later) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#filter), `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger` · `FilterFormField` | Schema-driven filters with chips, presets, validation, and URL or storage persistence, and a query-driven `variant="bar"` / `"facets"` (quick filters, locked conditions, a phone sheet, a URL codec for a loader); the filter bar's "Filters (N)" (`FilterSheetTrigger`) can be placed inside a `ServerTable` (its actions). | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger`, `FilterFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#filter), `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger` · `FilterFormField` | Schema-driven filters with chips, presets, validation, and URL or storage persistence, and a query-driven `variant="bar"` / `"facets"` (quick filters, locked conditions, a phone sheet, a URL codec for a loader; `bandDensity="compact"` as on `ServerTable`); the filter bar's "Filters (N)" (`FilterSheetTrigger`) can be placed inside a `ServerTable` (its actions). | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger`, `FilterFormField` |
 | — | [`FilterInline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` | The filter panel shown inline, or in a popover, dialog, sheet or drawer. | `FilterInline`, `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-facetgroup.webp" width="120" alt="FacetGroup"> | [`FacetGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#facetgroup) | A collapsible facet: a header button with the title, a count Badge of the active values, Clear and a chevron, over the values (typically a `CheckboxGroup` with counts). | `FacetGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems`… | Pagination primitives, with first / last links. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |
@@ -650,7 +651,8 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface, and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-breadcrumb.webp" width="120" alt="Breadcrumb"> | [`Breadcrumb`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#breadcrumb), `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Breadcrumb primitives. | `Breadcrumb` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-listdetailslayout.webp" width="120" alt="ListDetailsLayout"> | [`ListDetailsLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#listdetailslayout), `PaneLayout`, `ThreadLayout` | List / details that collapses to one view on mobile (a `back` bar and focus moves on the details, `breakpoint="container"` to follow its own width), a side pane that becomes a sheet, and a centred column. | `ListDetailsLayout`, `PaneLayout`, `ThreadLayout` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-responsivegrid.webp" width="120" alt="ResponsiveGrid"> | [`ResponsiveGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#responsivegrid) | Container-query grid that grows from 1 to 5 columns. | `ResponsiveGrid` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-responsivegrid.webp" width="120" alt="ResponsiveGrid"> | [`ResponsiveGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#responsivegrid) | Container-query grid that grows from 1 to 5 columns, or fills by a minimum tile width (`minItem`) with a `gap`. | `ResponsiveGrid` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sectioncolumns.webp" width="120" alt="SectionColumns"> | [`SectionColumns`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sectioncolumns) | Short page sections side by side from a viewport breakpoint (`from`, `columns`), stacked in source order below it; not a landmark. | — (later, [#1614](https://github.com/softistx/nxgt-material/issues/1614)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-resizable.webp" width="120" alt="ResizableGroup"> | [`ResizableGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#resizablegroup), `ResizablePanel`, `ResizableSeparator` | Resizable panels with an optional grip handle. | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-skiplink.webp" width="120" alt="SkipLink"> | [`SkipLink`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#skiplink) | Skip-to-content control, visible on focus. `DocSkipLink` composes it with `#doc-content`. | `SkipLink` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-pager.webp" width="120" alt="Pager"> | [`Pager`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#pager) | Previous / next cards for a sequence of pages. `DocPager` composes it. | `Pager` |