@nxgt/material 3.65.0 → 3.67.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @nxgt/material
 
+## 3.67.0
+
+### Minor Changes
+
+- [#2079](https://github.com/softistx/nxgt-material/pull/2079) [`37b1427`](https://github.com/softistx/nxgt-material/commit/37b1427bfc7bc0438e2367f91b6d71ba117a8c16) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `BackLink`: a link to the parent page, a ghost `LinkButton` with a leading arrow-left icon hidden from assistive tech and mirrored in right-to-left, named by its label ([#1694](https://github.com/softistx/nxgt-material/issues/1694)).
+
+- [#2076](https://github.com/softistx/nxgt-material/pull/2076) [`280a39a`](https://github.com/softistx/nxgt-material/commit/280a39a6ce85a8f638899094dcfa48ea7d901071) Thanks [@SteveGT96](https://github.com/SteveGT96)! - RowMenu: `useRowMenuFocus()` hands the focus back to a given row's trigger once an async action, a toast or a follow-up dialog is over. It returns a `focusRef` for the table and `focusRowMenu(rowId)`, which matches the row by id exactly (`getRowId`'s, written on the trigger by `rowMenuColumn` and by the new `RowMenu` `rowId` prop), never by label. `findRowMenuTrigger(rowId, scope?)` is exported too ([#2075](https://github.com/softistx/nxgt-material/issues/2075)). `focusRowMenu` answers `true` only when the trigger holds the focus, and claims it again for two frames if a dialog or a toast takes it. Vue: [#2077](https://github.com/softistx/nxgt-material/issues/2077).
+
+## 3.66.0
+
+### Minor Changes
+
+- [#2062](https://github.com/softistx/nxgt-material/pull/2062) [`6d1e6f6`](https://github.com/softistx/nxgt-material/commit/6d1e6f631b738f5e3c7539e2d54b73e36cbaa2e5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NumberField` and `NumberFormField`: the +/− buttons are named after their field ("Increase Guests", "Diminuer Invités"), through the new `material.number-field.increase-named` and `decrease-named` keys (en, fr), so a form with several number fields no longer gives a screen reader identical buttons ([#1928](https://github.com/softistx/nxgt-material/issues/1928)). The name is the plain-text `label`, else `aria-label`; a field with neither keeps "Increase" / "Decrease". A test that looks the buttons up by the exact name `Increase` now needs `/^Increase/` or the full name. The Vue twin is the `vue` issue [#2060](https://github.com/softistx/nxgt-material/issues/2060).
+
+- [#2078](https://github.com/softistx/nxgt-material/pull/2078) [`1c6ca26`](https://github.com/softistx/nxgt-material/commit/1c6ca2674d0cea09a3f728b041cae42d0c1f9ccd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `SegmentedNav` and `SegmentedNavItem`, segmented route links: the segmented `ToggleGroup` look as a labelled `nav` of links, the current one marked `aria-current="page"` from `value` or `current` and drawn as the selected pill. Tab moves from link to link; on a phone the nav scrolls inside itself with an edge fade. The links render through React Router's `Link` or the `LinkComponentProvider`, with `preventScrollReset` on by default. The segmented and forced-colours `ToggleGroup` styles also follow `aria-current="page"`.
+
+- [#2070](https://github.com/softistx/nxgt-material/pull/2070) [`59a0cdc`](https://github.com/softistx/nxgt-material/commit/59a0cdc8642bdca240f3483f743e808a9d2a747b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ShareButton` (Buttons & actions) shares a link, text or title (`url`, `text`, `title`) through `navigator.share` when the browser has it (and `canShare` accepts the data), does nothing when the user closes the sheet (`AbortError`), and otherwise copies the link with `CopyButton`'s "Copied" / "Copy failed" announcement. The accessible name stays "Share" (`SHARE_BUTTON_LABEL`, or `label`) and `onShare` reports `'shared'`, `'cancelled'`, `'copied'` or `'failed'`. `navigator` is read on click, so it server-renders. New text `material.share.share`, in English and French. Additive; React only for now. Fixes [#1945](https://github.com/softistx/nxgt-material/issues/1945).
+
+- [#2073](https://github.com/softistx/nxgt-material/pull/2073) [`76c8eac`](https://github.com/softistx/nxgt-material/commit/76c8eac2c26fb38e47e43e317498b3c4a393b4d8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `StatCard` takes `href` (and `linkComponent`, like `LinkButton`; `LinkComponentProvider` applies too): the whole card becomes one link with a trailing chevron (a link without hover, on a phone), the card's hover border and focus-visible ring, named by its label and value ([#2072](https://github.com/softistx/nxgt-material/issues/2072)).
+
+- [#2078](https://github.com/softistx/nxgt-material/pull/2078) [`1c6ca26`](https://github.com/softistx/nxgt-material/commit/1c6ca2674d0cea09a3f728b041cae42d0c1f9ccd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `useTabParam`, `skipTabChange` and `tabIds` for route tabs kept in the URL. `useTabParam({ values })` reads `values` as literal types and returns the current `value` (an unknown param falls back to the default) and `hrefFor(tab)`, a `to` for `TabsNavLink` / `SegmentedNavItem` that keeps the other params, drops the hash (`keepHash` keeps it, since `ScrollRestoration` jumps to a hash) and writes no param for the default tab (`explicitDefault` writes it out). `skipTabChange()` is a `shouldRevalidate` that skips the loaders when only the tab param changed. `tabIds(value, prefix = 'tab')` returns the stable `<prefix>-<value>` / `<prefix>-panel-<value>` ids for the tab and its panel, for tests; the prefix keeps two tab sets on one page apart.
+
+- [#2078](https://github.com/softistx/nxgt-material/pull/2078) [`1c6ca26`](https://github.com/softistx/nxgt-material/commit/1c6ca2674d0cea09a3f728b041cae42d0c1f9ccd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `TabsNav` and `TabsNavLink`, route tabs as links: a labelled `nav` of links in the `Tabs` look (`underline` or `segmented`), the current one marked `aria-current="page"` from `value` or `current`, with the sliding indicator and the phone scroll cue. The links render through React Router's `Link` or the `LinkComponentProvider`, with `preventScrollReset` on by default. The current link stays marked in forced colours, links keep a 44px target on a coarse pointer, and inside an `ActivityLayout` with a `backdrop` the strip is a frosted band like `Tabs`.
+
+### Patch Changes
+
+- [#2067](https://github.com/softistx/nxgt-material/pull/2067) [`b60e637`](https://github.com/softistx/nxgt-material/commit/b60e637ce3d9b94e84b1de570281582443628309) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Internal: the label hooks reuse `cleanObject` instead of six local copies ([#1941](https://github.com/softistx/nxgt-material/issues/1941)).
+
 ## 3.65.0
 
 ### Minor Changes

package/README.md

@@ -526,6 +526,8 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-scrollarea.webp" width="120" alt="ScrollArea"> | [`ScrollArea`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#scrollarea), `ScrollBar` | Scroll container with a thin custom scrollbar that matches the theme. | `ScrollArea`, `ScrollBar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`, `TableEmpty` | Styled semantic table inside a scrollable wrapper; `TableEmpty` is the full-width "nothing here" row. | `Table` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill. | `Tabs` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabsnav.webp" width="120" alt="TabsNav"> | [`TabsNav`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabsnav), `TabsNavLink`, `useTabParam`, `skipTabChange`, `tabIds` | Route tabs as links: a `nav` of links in the `Tabs` look, with `aria-current="page"` on the current one, the sliding indicator and the phone scroll cue; `useTabParam` keeps the tab in the URL. | no equivalent yet |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-segmentednav.webp" width="120" alt="SegmentedNav"> | [`SegmentedNav`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#segmentednav), `SegmentedNavItem` | Segmented links: the segmented `ToggleGroup` look as a `nav` of links, with `aria-current="page"` and the pill on the current one; it scrolls inside itself on a phone. | no equivalent yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#toggle) | Pressable on / off button: default or outlined, three sizes. | `Toggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-togglegroup.webp" width="120" alt="ToggleGroup"> | [`ToggleGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#togglegroup), `ToggleGroupItem`, `ToggleGroupSeparator` | Toggle group in three looks: connected (pill morph), segmented (sliding pill), separate; sizes sm, md, lg; horizontal or vertical. | `ToggleGroup`, `ToggleGroupItem` |
 | — | [`Activity`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#activity) | React `<Activity>` switched by a boolean `visible`. | `Activity` |
@@ -545,7 +547,9 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-toolbar.webp" width="120" alt="Toolbar"> | [`Toolbar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#toolbar), `ToolbarButton`, `ToolbarToggle`, `ToolbarSeparator`, `ToolbarGroup`, `ToolbarToggleGroup`, `ToolbarToggleItem`, `ToolbarItemSlot`, `ToolbarMore`, `useToolbarEntry`, `useToolbarOverflow`, `useToolbarSpilled`, `useToolbarMoreAnchor`, `ToolbarPair` | A row of icon actions (WAI-ARIA toolbar): floating or docked, neutral or primary, comfortable or compact density, quiet, expressive or morph pressed look, rides above the phone keyboard, groups, choices and priorities spilling into More (a row or a column, with submenus, checkboxes and launched popovers and dialogs), `useToolbarOverflow` for a More of your own, your own controls and fields as items, hides on scroll. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-responsivebutton.webp" width="120" alt="ResponsiveButton"> | [`ResponsiveButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#responsivebutton) | Shows its label on desktop and collapses to icon-only on mobile, keeping the label for screen readers. | `ResponsiveButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-linkbutton.webp" width="120" alt="LinkButton"> | [`LinkButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#linkbutton), `IconLinkButton`, `ResponsiveLinkButton` | The button styles rendered as `react-router` links. | `LinkButton`, `IconLinkButton`, `ResponsiveLinkButton` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-backlink.webp" width="120" alt="BackLink"> | [`BackLink`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#backlink) | A ghost link to the parent page with a leading arrow, mirrored in right-to-left. | `BackLink` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#copybutton), `CopyValue` | Copies a value to the clipboard and briefly shows a check mark. `CopyValue` displays the value next to the button. | `CopyButton`, `CopyValue` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-sharebutton.webp" width="120" alt="ShareButton"> | [`ShareButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#sharebutton) | Opens the system share sheet (`navigator.share`) and copies the link where there is none. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-highlighttext.webp" width="120" alt="HighlightText"> | [`HighlightText`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#highlighttext) | Marks case-insensitive matches of a query inside a string (`splitMatch`). | `HighlightText` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#loadmorebutton) | "Load more" button for cursor pagination; icon-only with a tooltip unless `expanded`. | `LoadMoreButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-loadmorefooter.webp" width="120" alt="LoadMoreFooter"> | [`LoadMoreFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#loadmorefooter) | Footer of a paged list: shown-of-total line, load button, and a failed state with retry. | not yet |
@@ -639,7 +643,7 @@ 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, 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-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`); `href` (and `linkComponent`) makes the whole card one link with a trailing chevron; `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` |
@@ -673,7 +677,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-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. Or cards and tiles instead of the table (`layout`, `renderCard`, `renderTile`), and `layout={{ phone: 'tiles', wide: 'table' }}` for tiles on a phone ([cards and tiles guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/cards-and-tiles.md)). Long lists render only the rows in view (`virtual`). | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), an accessible `name`, a `max` rows with a notice, and `focusTrigger()` to give the focus back after a dialog, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened; `useRowMenuFocus()` / `focusRowMenu(rowId)` hands it back to one row's button after an async action, a toast or a later dialog. | — |
 | <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-pagefooter.webp" width="120" alt="PageFooter"> | [`PageFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagefooter) | 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 built from the URL's cursor trail (`pageInfo`, `totalCount`, `params`; `totalCount` is optional: a feed with no total shows no range, only Previous / Next; `hideOnSinglePage` renders nothing when there is no previous and no next page), the same footer `ServerTable` draws, icon-only with `pageControls="icon"` (44px targets on a touch screen); an end with no page is a disabled button, `aria-disabled`. | `PageFooter` |
 | <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) |

package/dist/{alert-dialog-C0nGUSCP.js → alert-dialog-BgQDxcYh.js}

@@ -3,7 +3,7 @@ import { t } from "./utils-BLfntITJ.js";
 import { o as n } from "./dist-DVRQkaTK.js";
 import { c as r, s as i } from "./dist-lmHmz_bu.js";
 import { t as a } from "./in-dialog-Vwkyp-M5.js";
-import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-BQ413TNG.js";
+import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-KypnR7vv.js";
 import { i as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";

package/dist/{async-slice-CyansBvD.js → async-slice-BCZyWgGr.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-BJsjXcAp.js";
+import { l as e, r as t, s as n, u as r } from "./translator-ChpeKCO3.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";
@@ -72,8 +72,31 @@ function x(e) {
 	return /^(https?:)?\/\//.test(e) || e.startsWith("mailto:");
 }
 //#endregion
+//#region lib/lib/object.utils.ts
+function S(e, t) {
+	let n = {};
+	if (!Array.isArray(t)) n[t] = e?.[t];
+	else for (let r of t) n[r] = e?.[r];
+	return n;
+}
+function C(e, t) {
+	let n = { ...e };
+	if (Array.isArray(t)) for (let e of t) delete n?.[e];
+	else delete n?.[t];
+	return n ?? {};
+}
+function w(e) {
+	return e;
+}
+async function T(e) {
+	return await e;
+}
+function E(e, t = !1) {
+	return Object.fromEntries(Object.entries(e).filter(([e, n]) => t ? n != null && n !== void 0 : n !== void 0));
+}
+//#endregion
 //#region lib/lib/zod-error-map.ts
-var S = (e) => {
+var D = (e) => {
 	let t = typeof e;
 	switch (t) {
 		case "number": return Number.isNaN(e) ? "NaN" : "number";
@@ -83,7 +106,7 @@ var S = (e) => {
 			if (Object.getPrototypeOf(e) !== Object.prototype && e.constructor) return e.constructor.name;
 	}
 	return t;
-}, C = ({ storageKey: i = e, language: a, translate: o = t } = {}) => {
+}, O = ({ storageKey: i = e, language: a, translate: o = t } = {}) => {
 	let s = () => typeof a == "function" ? a() : a ?? n(i, "en", r);
 	return (e) => {
 		let t = s(), n = (e, n) => o(e, n, t), r = (e, t) => {
@@ -94,7 +117,7 @@ var S = (e) => {
 			case "invalid_type": {
 				let t = {
 					expected: e.expected,
-					received: S(e.input)
+					received: D(e.input)
 				};
 				return e.input ? r(`material.zod.invalid_type.${e.expected}`, t) ?? n("material.zod.invalid_type.default", t) : n("material.zod.required", t);
 			}
@@ -119,12 +142,12 @@ var S = (e) => {
 };
 //#endregion
 //#region ../../node_modules/redux/dist/redux.mjs
-function w(e) {
+function k(e) {
 	return `Minified Redux error #${e}; visit https://redux.js.org/Errors?code=${e} for the full message or use the non-minified dev environment for full errors. `;
 }
-var T = () => Math.random().toString(36).substring(7).split("").join(".");
-`${/* @__PURE__ */ T()}`, `${/* @__PURE__ */ T()}`;
-function E(e) {
+var A = () => Math.random().toString(36).substring(7).split("").join(".");
+`${/* @__PURE__ */ A()}`, `${/* @__PURE__ */ A()}`;
+function j(e) {
 	if (e === void 0) return "undefined";
 	if (e === null) return "null";
 	let t = typeof e;
@@ -136,9 +159,9 @@ function E(e) {
 		case "function": return t;
 	}
 	if (Array.isArray(e)) return "array";
-	if (k(e)) return "date";
-	if (O(e)) return "error";
-	let n = D(e);
+	if (P(e)) return "date";
+	if (N(e)) return "error";
+	let n = M(e);
 	switch (n) {
 		case "Symbol":
 		case "Promise":
@@ -149,42 +172,42 @@ function E(e) {
 	}
 	return Object.prototype.toString.call(e).slice(8, -1).toLowerCase().replace(/\s/g, "");
 }
-function D(e) {
+function M(e) {
 	return typeof e.constructor == "function" ? e.constructor.name : null;
 }
-function O(e) {
+function N(e) {
 	return e instanceof Error || typeof e.message == "string" && e.constructor && typeof e.constructor.stackTraceLimit == "number";
 }
-function k(e) {
+function P(e) {
 	return e instanceof Date || typeof e.toDateString == "function" && typeof e.getDate == "function" && typeof e.setDate == "function";
 }
-function A(e) {
+function F(e) {
 	let t = typeof e;
-	return process.env.NODE_ENV !== "production" && (t = E(e)), t;
+	return process.env.NODE_ENV !== "production" && (t = j(e)), t;
 }
-function j(e, t) {
+function I(e, t) {
 	return function(...n) {
 		return t(e.apply(this, n));
 	};
 }
-function M(e, t) {
-	if (typeof e == "function") return j(e, t);
-	if (typeof e != "object" || !e) throw Error(process.env.NODE_ENV === "production" ? w(16) : `bindActionCreators expected an object or a function, but instead received: '${A(e)}'. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`);
+function L(e, t) {
+	if (typeof e == "function") return I(e, t);
+	if (typeof e != "object" || !e) throw Error(process.env.NODE_ENV === "production" ? k(16) : `bindActionCreators expected an object or a function, but instead received: '${F(e)}'. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`);
 	let n = {};
 	for (let r in e) {
 		let i = e[r];
-		typeof i == "function" && (n[r] = j(i, t));
+		typeof i == "function" && (n[r] = I(i, t));
 	}
 	return n;
 }
 //#endregion
 //#region lib/lib/redux/use-actions.ts
-function N(e, t) {
+function R(e, t) {
 	let n = u();
-	return a(() => M(e, n), t ? [n, ...t] : [n]);
+	return a(() => L(e, n), t ? [n, ...t] : [n]);
 }
 //#endregion
 //#region lib/lib/redux/async-slice.ts
-var P = s({ creators: { asyncThunk: o } });
+var z = s({ creators: { asyncThunk: o } });
 //#endregion
-export { x as a, v as c, h as d, p as f, d as h, C as i, _ as l, f as m, N as n, b as o, g as p, S as r, y as s, P as t, m as u };
+export { p as _, w as a, d as b, C as c, b as d, y as f, h as g, m as h, O as i, S as l, _ as m, R as n, T as o, v as p, D as r, E as s, z as t, x as u, g as v, f as y };

package/dist/{background-qdnet2A5.js → background-D1gC4m2R.js}

@@ -2,7 +2,7 @@ import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { a as t, i as n, n as r, r as i } from "./icon-sprites-CaYXzOL4.js";
 import { t as a } from "./is-production-GLw59WU8.js";
 import { a as o, t as s } from "./theme-context-Cofk6vgs.js";
-import { t as c } from "./compose-refs-DZ0iIVF-.js";
+import { t as c } from "./compose-refs-G4J4kaUA.js";
 import { t as l } from "./use-background-activity-KxQgelFF.js";
 import { t as u } from "./scene-svg-DJKa5vsg.js";
 import { n as d, r as f, t as p } from "./scene-options-2zNF3ZkQ.js";

package/dist/backgrounds.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "./background-qdnet2A5.js";
+import { r as e, t } from "./background-D1gC4m2R.js";
 import { BACKGROUND_INTENSITIES as n, BACKGROUND_PRESETS as r, BACKGROUND_TONES as i, MOTIF_SHAPES as a, MOTIF_SHAPES_ALL as o, SHIPPED_BACKGROUND_PRESETS as s } from "@nxgt/material-core/backgrounds";
 export { e as AVAILABLE_BACKGROUND_PRESETS, n as BACKGROUND_INTENSITIES, r as BACKGROUND_PRESETS, i as BACKGROUND_TONES, t as Background, a as MOTIF_SHAPES, o as MOTIF_SHAPES_ALL, s as SHIPPED_BACKGROUND_PRESETS };

package/dist/{button-D5k3K-gM.js → button-2de_lrix.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { n as r, r as i, t as a } from "./spinner-OQAweH2r.js";
+import { n as r, r as i, t as a } from "./spinner-PdSk7zEs.js";
 import { a as o, i as s, n as c, o as l, s as u, t as d } from "./use-click-lock-BZYtTmVt.js";
 import { t as f } from "./is-production-GLw59WU8.js";
 import { t as p } from "./button-group-context-CaP0X5p_.js";

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./warn-once-C_e47JM8.js";
-import { t as r } from "./button-D5k3K-gM.js";
-import { t as i } from "./use-material-translation-mY3U83TV.js";
+import { t as r } from "./button-2de_lrix.js";
+import { t as i } from "./use-material-translation-DkE9J5NE.js";
 import { t as a } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as o, n as s, r as c, t as l } from "./util-4heV2LPI.js";
 import { t as u } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { t as d } from "./chip-lWXIJkqo.js";
+import { t as d } from "./chip-Cs0uEjpu.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-lWXIJkqo.js → chip-Cs0uEjpu.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { r as t } from "./spinner-OQAweH2r.js";
+import { r as t } from "./spinner-PdSk7zEs.js";
 import { s as n } from "./use-click-lock-BZYtTmVt.js";
-import { t as r } from "./use-material-translation-mY3U83TV.js";
+import { t as r } from "./use-material-translation-DkE9J5NE.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { cloneElement as a, isValidElement as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/{code-editor-aXG4CdY-.js → code-editor-BYhBAfcc.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { a as n } from "./dist-lmHmz_bu.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-ChvAIQIW.js";
-import { a as c, i as l, n as u } from "./field-blur-context-C8BX8IBy.js";
-import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-CQ3S_XZw.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-DdzyvN76.js";
+import { a as c, i as l, n as u } from "./field-blur-context-BZtwcPUV.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-BmNYNaRB.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-mY3U83TV.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-CsaXyApg.js";
+import { t as _ } from "./use-material-translation-DkE9J5NE.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-xhmbF6wA.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-DpaP0lm1.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-CQ3S_XZw.js";
-import { t as o } from "./use-material-translation-mY3U83TV.js";
-import { i as s, n as c, o as l } from "./code-language-items-CsaXyApg.js";
-import { r as u, t as d } from "./field-blur-CV9orzdJ.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-BmNYNaRB.js";
+import { t as o } from "./use-material-translation-DkE9J5NE.js";
+import { i as s, n as c, o as l } from "./code-language-items-xhmbF6wA.js";
+import { r as u, t as d } from "./field-blur-B2y-bNYi.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-aXG4CdY-.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BYhBAfcc.js";
 import { useEffect as k, useRef as A, useState as j } from "react";
 import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
 import { getCspNonce as F } from "@nxgt/material-core/csp-nonce";

package/dist/{code-language-items-CsaXyApg.js → code-language-items-xhmbF6wA.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-ChvAIQIW.js";
-import { t as n } from "./use-material-translation-mY3U83TV.js";
+import { d as e, f as t } from "./dropdown-menu-DdzyvN76.js";
+import { t as n } from "./use-material-translation-DkE9J5NE.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/components/components.css

@@ -122,6 +122,8 @@
 @import "./ui/primitives/accordion/accordion.css";
 @import "./ui/primitives/accordion/accordion-surfaces.css";
 @import "./ui/primitives/collapsible/collapsible.css";
+/* TabsNav in forced colours (the current link's mark). */
+@import "./ui/primitives/tabs/tabs-nav-forced.css";
 /* ToggleGroup: shared rules, then one file per variant. */
 @import "./ui/primitives/toggle-group/toggle-group.css";
 @import "./ui/primitives/toggle-group/toggle-group-connected.css";

package/dist/components/ui/layout/app-shell/activity-backdrop.css

@@ -149,9 +149,10 @@
 		backdrop-filter: blur(var(--nxgt-backdrop-blur));
 	}
 
-	/* Tabs: the strip is a band, its top corners rounded. (The segmented look
-	 * has its own track.) */
-	[data-slot="activity-layout"][data-backdrop] [data-slot="tabs-list"] {
+	/* Tabs and route tabs (`TabsNav`): the strip is a band, its top corners
+	 * rounded. (The segmented look has its own track.) */
+	[data-slot="activity-layout"][data-backdrop]
+	:is([data-slot="tabs-list"], [data-slot="tabs-nav"]) {
 		border-start-start-radius: var(--radius);
 		border-start-end-radius: var(--radius);
 		background: var(--nxgt-backdrop-fill-nav);

package/dist/components/ui/primitives/tabs/tabs-nav-forced.css

@@ -0,0 +1,27 @@
+/* The indicator hides when no link is current (a `value` that matches none). */
+[data-slot="tabs-nav"]:not(:has([data-state="active"]))
+> [data-slot="tabs-indicator"] {
+	visibility: hidden;
+}
+
+/* TabsNav in forced colours: the current link keeps a mark. The indicator and
+ * the active link's ::after are backgrounds and borders, which the browser
+ * flattens; they are painted again with the system Highlight. React only
+ * (tabs-classes.ts is shared with Vue, so this is not a class there). */
+@media (forced-colors: active) {
+	[data-slot="tabs-nav"][data-variant="underline"]
+		> [data-slot="tabs-indicator"],
+	[data-slot="tabs-nav"][data-variant="underline"]
+		[data-slot="tabs-trigger"][aria-current="page"]::after {
+		forced-color-adjust: none;
+		background: Highlight;
+	}
+	[data-slot="tabs-nav"][data-variant="segmented"]
+		> [data-slot="tabs-indicator"],
+	[data-slot="tabs-nav"][data-variant="segmented"]
+		[data-slot="tabs-trigger"][aria-current="page"]::after {
+		forced-color-adjust: none;
+		border: 2px solid Highlight;
+		background: Canvas;
+	}
+}

package/dist/components/ui/primitives/toggle-group/toggle-group-segmented.css

@@ -61,7 +61,8 @@
 		> .nxgt-toggle-group-item:hover:not(
 			:disabled,
 			[aria-checked="true"],
-			[aria-pressed="true"]
+			[aria-pressed="true"],
+			[aria-current="page"]
 		) {
 		background: var(--tg-seg-hover);
 	}
@@ -78,7 +79,11 @@
 	 * every chosen state is primary). Forced colours: the pill is hidden and
 	 * the SelectedItem rule in toggle-group.css wins (its layer-less rule). */
 	[data-variant="segmented"]
-	> .nxgt-toggle-group-item:is([aria-checked="true"], [aria-pressed="true"]) {
+	> .nxgt-toggle-group-item:is(
+		[aria-checked="true"],
+		[aria-pressed="true"],
+		[aria-current="page"]
+	) {
 		color: var(--primary-text);
 	}
 
@@ -135,6 +140,9 @@
 	/* Multiple: a pill per pressed item; touching pills join. Also a single
 	 * group of 9 or more items, which has no sliding pill. */
 	[data-variant="segmented"] > .nxgt-toggle-group-item[aria-pressed="true"],
+	/* SegmentedNav: a scrolling track has no sliding pill, the current link
+	 * paints its own. */
+	[data-variant="segmented"] > .nxgt-toggle-group-item[aria-current="page"],
 	[data-variant="segmented"]:has(> .nxgt-toggle-group-item:nth-of-type(9))
 		> .nxgt-toggle-group-item[aria-checked="true"] {
 		background: var(--tg-pill);

package/dist/components/ui/primitives/toggle-group/toggle-group.css

@@ -127,7 +127,11 @@
 	.nxgt-toggle-group-item {
 		border: 1px solid ButtonText;
 	}
-	.nxgt-toggle-group-item:is([aria-checked="true"], [aria-pressed="true"]) {
+	.nxgt-toggle-group-item:is(
+		[aria-checked="true"],
+		[aria-pressed="true"],
+		[aria-current="page"]
+	) {
 		forced-color-adjust: none;
 		background: SelectedItem;
 		color: SelectedItemText;