@nxgt/material 3.86.2 → 3.87.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nxgt/material
 
+## 3.87.0
+
+### Minor Changes
+
+- [#2548](https://github.com/softistx/nxgt-material/pull/2548) [`ee28df1`](https://github.com/softistx/nxgt-material/commit/ee28df144cd88f74549b8b622815e7b5be232077) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Cap the cursor trail. `table-url`'s `readCursor`, `nextPage`, `previousPage` and `serverPagination` take a `maxTrail` option (unbounded by default); past it the oldest cursors collapse into a counted cut mark (`trail=~3,c4,c5`, `CUT_MARK`), so the URL stays short and the page offset stays exact (`pageIndex`, `pageOffset`). Previous from the cut goes to the first page; URLs without a cut mark read as before. `ServerTable` and `PageFooter` take a `maxTrail` prop, `20` by default.
+
+- [#2551](https://github.com/softistx/nxgt-material/pull/2551) [`ce86bd3`](https://github.com/softistx/nxgt-material/commit/ce86bd3a33cb6acfdbc44eed7b387dacf5866544) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `MarkingList`, for marking many people quickly (a roll call, a grade-sheet-like screen): rows of a person, each with the same app-defined segmented choice (`choices`: id, label, tone, icon; controlled `value`, `onValueChange`), an on-demand detail (`renderDetail`, with `defaultExpanded` or controlled `expanded` / `onExpandedChange`), `locked` rows with their reason (focusable, `aria-disabled`, described by the reason), one tab stop with arrow-key navigation across segments, rows and the expand button, `onSetRemaining` (with `setRemainingChoices`) to apply a choice to every unmarked row, a tally that counts locked rows apart and speaks only on bulk changes or once marking pauses, a check on the chosen segment and forced-colours styles, and 48px targets in one column on a phone. Adds the `marking-list.*` i18n keys (en, fr). Fixes [#2547](https://github.com/softistx/nxgt-material/issues/2547).
+
+### Patch Changes
+
+- [#2552](https://github.com/softistx/nxgt-material/pull/2552) [`5f4f40a`](https://github.com/softistx/nxgt-material/commit/5f4f40a954ad4b49c78999b0429559c980b5e2e2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - On a coarse pointer, `AppBreadcrumb`/`BreadcrumbLink` crumbs, the filter bar's search input (the `ServerTable` search, at both densities) and the `RepeatableGroup`/`ChoiceListFormField` move up/down buttons are 44x44 at every width (they were 76x28, 196x40 and 36x36 from 768px). A mouse keeps the same layout. Fixes [#2550](https://github.com/softistx/nxgt-material/issues/2550).
+
+- [#2558](https://github.com/softistx/nxgt-material/pull/2558) [`98c753d`](https://github.com/softistx/nxgt-material/commit/98c753dba068c500d530d38c29d42beb031b3736) Thanks [@SteveGT96](https://github.com/SteveGT96)! - On a coarse pointer, every `ToggleGroup` item (connected, segmented and separate, single and multiple, every size, icon-only ones included) is at least 44x44. A mouse keeps the same sizes. Fixes [#2557](https://github.com/softistx/nxgt-material/issues/2557).
+- Updated dependencies [[`ee28df1`](https://github.com/softistx/nxgt-material/commit/ee28df144cd88f74549b8b622815e7b5be232077)]:
+  - @nxgt/material-core@0.52.0
+
 ## 3.86.2
 
 ### Patch Changes

package/README.md

@@ -792,6 +792,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-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` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-tree.webp" width="120" alt="Tree"> | [`Tree`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#tree), `TreeItem`, `useTree` | Expandable tree with none, single or multiple selection and keyboard navigation. | `Tree`, `TreeItem`, `useTree` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listpane.webp" width="120" alt="ListPane"> | [`ListPane`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listpane), `ListPaneItem` | A card for a list: select-all, title, count pill, filter, a scrolling body and a footer; `ListPaneItem` is its row (media, description, badge, trailing buttons, `compact` density, `card` appearance). | — (later) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-markinglist.webp" width="120" alt="MarkingList"> | [`MarkingList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#markinglist) | People in rows with a shared app-defined segmented choice (present, absent, late), an on-demand detail, locked rows with their reason, arrow-key navigation, "set remaining to" and a tally; 48px targets on a phone. | — (later, #2549) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-drag-and-drop.webp" width="120" alt="DndProvider"> | [`DndProvider`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#drag-and-drop), `Draggable`, `Droppable`, `Sortable`, `DragHandle`… | Drag-and-drop primitives; see [dnd](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmaterialdnd). | `DndProvider`, `Draggable`, `Droppable`, `Sortable`, `DragHandle` |
 
 ### Navigation & layout

package/dist/{alert-dialog-DZnt8PYE.js → alert-dialog-DC_9MW49.js}

@@ -4,7 +4,7 @@ import { o as n } from "./dist-DVRQkaTK.js";
 import { r } from "./dist-DWZXlCZR.js";
 import { a as i } from "./dist-DHdUUM1w.js";
 import { t as a } from "./in-dialog-D61Yeaol.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-BA8G1qVU.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-BttT8j1o.js";
 import { i as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";
 import { Fragment as y, isValidElement as b } from "react";

package/dist/{async-slice-D3OdV2BS.js → async-slice-C6XbESai.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-BRZNhsy5.js";
+import { l as e, r as t, s as n, u as r } from "./translator-BwUYrek9.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";

package/dist/{button-MAL5an7L.js → button-BksHtogl.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, t as i } from "./spinner-CweqX5A9.js";
+import { n as r, t as i } from "./spinner-CngjH5-n.js";
 import { t as a } from "./dist-DkQbkF9T.js";
 import { a as o, i as s, n as c, o as l, s as u, t as d } from "./use-click-lock-Bwg_caHO.js";
 import { t as f } from "./is-production-GLw59WU8.js";

package/dist/{calculator-C3a8YMwl.js → calculator-C_dTrMWE.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t, r as n, t as r, u as i } from "./tabs-95Y2LmnV.js";
-import { t as a } from "./button-MAL5an7L.js";
-import { t as o } from "./use-material-translation-CCy1Me0h.js";
-import { t as s } from "./icon-button-DrqNk1Ww.js";
+import { n as t, r as n, t as r, u as i } from "./tabs-C0CPqX5U.js";
+import { t as a } from "./button-BksHtogl.js";
+import { t as o } from "./use-material-translation-BDVGF7-Z.js";
+import { t as s } from "./icon-button-caFcCpXV.js";
 import { t as c } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as l } from "./useEvent-2fKq-6w8.js";
 import { t as u } from "./useLatest-C2PnQEeD.js";
@@ -11,7 +11,7 @@ import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { n as m, t as h } from "./calculator-context-BugcKuVG.js";
 import { a as g, c as _, i as v, l as y, n as b, o as ee, r as te, s as ne } from "./calculator-announce-DRd2c6Dq.js";
-import { i as re, t as ie } from "./pos-types-JOXMY4Y2.js";
+import { i as re, t as ie } from "./pos-types-QcM9WTr0.js";
 import { a as ae, r as oe } from "./key-layout-cR79xfGE.js";
 import { n as x, r as se, t as ce } from "./programmer-word-CNCF7DJF.js";
 import { t as le } from "./standard-layout-BuSRr3TY.js";
@@ -279,11 +279,11 @@ function Le({ helpId: e }) {
 //#endregion
 //#region lib/components/ui/widgets/calculator/variants/variant-loader.ts
 var Re = {
-	scientific: () => import("./scientific-variant-CskM4MLV.js"),
-	pos: () => import("./pos-variant-B2mS8bMB.js"),
-	programmer: () => import("./programmer-variant-C_Tl0P4_.js"),
-	financial: () => import("./financial-variant-BIpzs8IL.js"),
-	conversion: () => import("./conversion-variant-BT5n4-jm.js")
+	scientific: () => import("./scientific-variant-0Fq8HLiY.js"),
+	pos: () => import("./pos-variant-BeON2e_Q.js"),
+	programmer: () => import("./programmer-variant-3cEMiII7.js"),
+	financial: () => import("./financial-variant-0fJAMale.js"),
+	conversion: () => import("./conversion-variant-Cauk0BMS.js")
 }, B = "failed", V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Set(), W = () => {
 	for (let e of U) e();
 };

package/dist/calculator-field.js

@@ -1,11 +1,11 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./button-MAL5an7L.js";
-import { t as n } from "./use-material-translation-CCy1Me0h.js";
-import { t as r } from "./icon-button-DrqNk1Ww.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-Cg4V4-E0.js";
-import { r as l, t as u } from "./currency-field-t41sFYg_.js";
+import { t } from "./button-BksHtogl.js";
+import { t as n } from "./use-material-translation-BDVGF7-Z.js";
+import { t as r } from "./icon-button-caFcCpXV.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-CVAW0t-r.js";
+import { r as l, t as u } from "./currency-field-Dy2e9kSr.js";
 import { r as d, t as f } from "./field-blur-DkiZOVNV.js";
-import { t as p } from "./calculator-C3a8YMwl.js";
+import { t as p } from "./calculator-C_dTrMWE.js";
 import { useId as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { Calculator as y } from "lucide-react";

package/dist/{calculator-segment-BigMpjhn.js → calculator-segment-FOUl66f6.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-CCy1Me0h.js";
+import { t as e } from "./use-material-translation-BDVGF7-Z.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region lib/components/ui/widgets/calculator/partials/calculator-segment.tsx
 function n({ label: n, choices: r, value: i, nameKey: a, onChange: o }) {

package/dist/calculator.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./calculator-C3a8YMwl.js";
+import { n as e, t } from "./calculator-C_dTrMWE.js";
 export { e as CALCULATOR_VARIANTS, t as Calculator };

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-MAL5an7L.js";
-import { t as i } from "./use-material-translation-CCy1Me0h.js";
+import { t as r } from "./button-BksHtogl.js";
+import { t as i } from "./use-material-translation-BDVGF7-Z.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-DKAKoNxq.js";
+import { t as d } from "./chip-BWaC87zs.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-DKAKoNxq.js → chip-BWaC87zs.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-CweqX5A9.js";
+import { n as t } from "./spinner-CngjH5-n.js";
 import { s as n } from "./use-click-lock-Bwg_caHO.js";
-import { t as r } from "./use-material-translation-CCy1Me0h.js";
+import { t as r } from "./use-material-translation-BDVGF7-Z.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-B6dFQSUJ.js → code-editor-ddbQ0pEc.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./dist-DWZXlCZR.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-IRFp4CH9.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-DtVC2xQW.js";
 import { a as c, i as l, n as u } from "./field-blur-context-BLGgf_3z.js";
-import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-BsgzHSNf.js";
+import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-BU5_H3UA.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-CCy1Me0h.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-CXEMiWoF.js";
+import { t as _ } from "./use-material-translation-BDVGF7-Z.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-jRlQfjAm.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,13 +1,13 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DWZXlCZR.js";
-import { o as n, r, s as i, t as a } from "./toolbar-items-BsgzHSNf.js";
-import { t as o } from "./use-material-translation-CCy1Me0h.js";
-import { i as s, n as c, o as l } from "./code-language-items-CXEMiWoF.js";
+import { o as n, r, s as i, t as a } from "./toolbar-items-BU5_H3UA.js";
+import { t as o } from "./use-material-translation-BDVGF7-Z.js";
+import { i as s, n as c, o as l } from "./code-language-items-jRlQfjAm.js";
 import { t as u } from "./skeleton-DSdtr2qc.js";
 import { t as d } from "./live-status-BGPaN8r8.js";
 import { t as f } from "./use-mobile-BDro060N.js";
 import { t as p } from "./react-node-text-Crkpfpco.js";
-import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-B6dFQSUJ.js";
+import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-ddbQ0pEc.js";
 import { r as D, t as O } from "./field-blur-DkiZOVNV.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";

package/dist/{code-language-items-CXEMiWoF.js → code-language-items-jRlQfjAm.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-IRFp4CH9.js";
-import { t as n } from "./use-material-translation-CCy1Me0h.js";
+import { d as e, f as t } from "./dropdown-menu-DtVC2xQW.js";
+import { t as n } from "./use-material-translation-BDVGF7-Z.js";
 import { t as r } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as i } from "./live-status-BGPaN8r8.js";
 import { useEffect as a, useRef as o, useState as s } from "react";

package/dist/components/components.css

@@ -148,6 +148,8 @@
 @import "./ui/display/vote-tally/vote-tally.css";
 /* TubeCap: a specimen tube chip, cap colours fixed by the tube convention. */
 @import "./ui/display/tube-cap/tube-cap.css";
+/* MarkingList: forced-colours rules for the chosen segment. */
+@import "./ui/collections/marking-list/marking-list.css";
 /* SecretCard: a face that is not rendered until it is revealed. */
 @import "./ui/display/secret-card/secret-card.css";
 /* Alert and Banner span the row in the form grids (#1497). */

package/dist/components/ui/collections/marking-list/marking-list.css

@@ -0,0 +1,16 @@
+/* MarkingList: the chosen segment is also a check and a border; in forced
+ * colours it takes the system's selected colours, as the toggle group does. */
+@media (forced-colors: active) {
+	.nxgt-marking-segment {
+		border: 1px solid ButtonText;
+	}
+	.nxgt-marking-segment[aria-pressed="true"] {
+		forced-color-adjust: none;
+		background: SelectedItem;
+		color: SelectedItemText;
+	}
+	.nxgt-marking-segment:focus-visible {
+		outline: 2px solid Highlight;
+		outline-offset: 2px;
+	}
+}

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

@@ -43,7 +43,7 @@
 			box-shadow 160ms ease-out;
 	}
 	[data-variant="connected"] > .nxgt-toggle-group-item[data-icon-only] {
-		width: calc(var(--tg-iw) + 2 * var(--sq));
+		width: max(var(--tg-touch), calc(var(--tg-iw) + 2 * var(--sq)));
 		padding-inline: 0;
 	}
 	/* Outer corners: the row's start and end, a column's top and bottom; a

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

@@ -55,7 +55,7 @@
 		border-radius: var(--tg-inner);
 	}
 	[data-variant="segmented"] > .nxgt-toggle-group-item[data-icon-only] {
-		min-width: calc(var(--tg-h) + 0.25rem);
+		min-width: max(var(--tg-touch), calc(var(--tg-h) + 0.25rem));
 	}
 	[data-variant="segmented"]
 		> .nxgt-toggle-group-item:hover:not(

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

@@ -65,7 +65,7 @@
 			scale var(--tg-fast) var(--tg-spring-fast);
 	}
 	[data-variant="separate"] > .nxgt-toggle-group-item[data-icon-only] {
-		width: calc(var(--tg-h) + 0.25rem);
+		width: max(var(--tg-touch), calc(var(--tg-h) + 0.25rem));
 		padding-inline-start: 0.25rem;
 	}
 	[data-variant="separate"] > .nxgt-toggle-group-item:hover:not(:disabled) {

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

@@ -13,6 +13,7 @@
 		--tg-spring: var(--nxgt-spring);
 		--tg-fast: var(--nxgt-spring-fast-duration);
 		--tg-slow: var(--nxgt-spring-duration);
+		--tg-touch: 0px;
 		--tg-h: 2.25rem;
 		--tg-pad: 1rem;
 		--tg-font: 0.875rem;
@@ -63,7 +64,8 @@
 		justify-content: center;
 		gap: var(--tg-lead-gap);
 		box-sizing: border-box;
-		min-width: var(--tg-h);
+		min-width: max(var(--tg-touch), var(--tg-h));
+		min-height: var(--tg-touch);
 		height: var(--tg-h);
 		padding-inline: var(--tg-pad);
 		border: 0;
@@ -104,6 +106,15 @@
 		cursor: not-allowed;
 		opacity: 0.45;
 	}
+	/* Touch: every item is a 44x44 box on a coarse pointer (a size sm item is
+	 * 32px, an icon-only one about 36 to 42px wide). --tg-touch is the floor
+	 * the item's min-width and min-height, and the variants' icon-only widths,
+	 * take through max(); a fine pointer keeps the sizes above. */
+	@media (pointer: coarse) {
+		.nxgt-toggle-group {
+			--tg-touch: 2.75rem;
+		}
+	}
 
 	/* The check a selected label-only item draws in (connected only). At rest
 	 * it takes no room: no width, and a margin that cancels the gap. */