@nxgt/material 3.86.2 → 3.88.0

package/docs/components/date-and-time.md

@@ -20,6 +20,7 @@ each change and, where one is left, the prop that keeps the old behaviour.
 | <img src="../previews/date-time-timefield.webp" width="96" alt=""> | [TimeField](#timefield) | A time typed in segments or picked in a `TimePicker` (a bottom sheet on a phone) |
 | <img src="../previews/date-time-timepicker.webp" width="96" alt=""> | [TimePicker](#timepicker) | Hour and minute tiles (or columns) with AM / PM |
 | <img src="../previews/date-time-durationfield.webp" width="96" alt=""> | [DurationField](#durationfield) | Hours and minutes as a total in minutes, typed on one line: "1 h 29 min" |
+| <img src="../previews/date-time-halfdayrangefield.webp" width="96" alt=""> | [HalfDayRangeField](#halfdayrangefield) | A range whose two ends are each a day plus morning or afternoon, ordered on the half |
 | <img src="../previews/date-time-minimonth.webp" width="96" alt=""> | [MiniMonth](#minimonth) | Compact month navigator with event dots and a keyboard date grid |
 | <img src="../previews/date-time-nowindicator.webp" width="96" alt=""> | [NowIndicator](#nowindicator) | The current-time line of a day schedule, moving each minute |
 
@@ -900,6 +901,116 @@ With `variant="fields"` the inputs are `textbox`es with the same names.
 
 ---
 
+## HalfDayRangeField
+
+![HalfDayRangeField](../previews/date-time-halfdayrangefield.webp)
+
+A range counted to the half day (a long absence, a closure): each end is a day
+(a `DateField`, typed or picked) plus a morning / afternoon toggle, and the end
+is ordered on the half. The morning of day D is not after the afternoon of day
+D; the afternoon of D to the morning of D is refused.
+
+```tsx
+import { useState } from 'react';
+import { type HalfDayRange, HalfDayRangeField } from '@nxgt/material/components';
+
+function Absence() {
+	const [value, setValue] = useState<HalfDayRange>();
+	return <HalfDayRangeField label="Absence" value={value} onValueChange={setValue} />;
+}
+// value: { start: { date: Date, half: 'morning' | 'afternoon' }, end: { … } }
+```
+
+With React Hook Form, `HalfDayRangeFormField` takes `control` and `name`, and its
+rule refuses an unordered range in the form (the message is
+`material.half-day-range.order`):
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { type HalfDayRange, HalfDayRangeFormField } from '@nxgt/material/components';
+
+type Values = { absence?: HalfDayRange };
+
+function AbsenceForm() {
+	const { control, handleSubmit } = useForm<Values>();
+	return (
+		<form onSubmit={handleSubmit((values) => save(values.absence))}>
+			<HalfDayRangeFormField control={control} name="absence" label="Absence" required />
+		</form>
+	);
+}
+```
+
+Without a resolver the field checks the order itself (a `rules.validate` of your
+own is kept beside it). React Hook Form ignores `rules` when a resolver is set,
+so with zod state the order in the schema, or an end before the start is
+submitted:
+
+```tsx
+import { z } from 'zod';
+import { type HalfDayRange, isHalfDayRangeOrdered } from '@nxgt/material/components';
+
+const schema = z.object({
+	absence: z
+		.custom<HalfDayRange>((v) => v != null, { message: 'Choose both days.' })
+		.refine(isHalfDayRangeOrdered, { message: 'The end cannot be before the start.' }),
+});
+```
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `value` | `HalfDayRange \| undefined` | | Controlled: `{ start: { date, half }, end: { date, half } }`; `date` is the local midnight of the day |
+| `defaultValue` | `HalfDayRange` | | Uncontrolled: the range the field starts with and then keeps |
+| `onValueChange` | `(value?: HalfDayRange) => void` | | The range as soon as both days are set, ordered or not; `undefined` while a day is missing |
+| `label`, `helperText`, `error`, `required`, `disabled`, `className`, `id` | | | As on the other fields |
+| `name` | `string` | | A test hook only (`data-pw` on the root, `.start` / `.end` on each end): the date inputs have no native `name`, so nothing is posted by a plain `<form>` |
+| `minDate`, `maxDate` | `Date` | | Bound both ends; the end's calendar also starts at the start's day |
+| `disabledDays`, `locale` | | | As on `DateField` (`timeZone` is not forwarded: days are the local ones) |
+
+**What the field says in each state:**
+
+| State | `onValueChange` | On screen |
+| --- | --- | --- |
+| A day is missing (start or end empty, or half typed) | `undefined` | The other end is kept; no message |
+| Both days set, end on or after the start on the half | the range | |
+| Both days set, end before the start on the half | the range, as entered | "The end cannot be before the start." under the field, `aria-invalid` on the halves, announced politely; in a form without a resolver, `HalfDayRangeFormField` makes it a field error (with zod, use the `refine` above) |
+| `value` reset to `undefined` from outside (a form `reset`) | | Both days are emptied, the halves go back to morning and afternoon, unless the emitted value was already `undefined` (a half-typed start or a cleared end stays: give the field a `key` that changes on reset) |
+
+A new range starts on the morning (start) and the afternoon (end), so one picked
+day is a full day. Each end has its own accessible names ("Start date", "Start
+half-day", "End date", "End half-day": `material.dates.start` / `end` and
+`material.half-day-range.*`, see the [i18n guide](../guides/i18n.md)).
+
+The value holds `Date`s: store a day with `format(date, 'yyyy-MM-dd')` (date-fns),
+not `toISOString()`, which moves it to UTC and can shift the day.
+
+```tsx
+import {
+	compareHalfDays,
+	halfDaysIn,
+	type HalfDayRange,
+	isHalfDayRangeOrdered,
+} from '@nxgt/material/components';
+
+const range: HalfDayRange = {
+	start: { date: new Date(2030, 5, 3), half: 'morning' },
+	end: { date: new Date(2030, 5, 4), half: 'afternoon' },
+};
+
+isHalfDayRangeOrdered(range); // true: the end is not before the start on the half
+halfDaysIn(range); // 4: Monday morning and afternoon, Tuesday morning and afternoon
+compareHalfDays(range.start, range.end); // -3: negative when the first comes first
+```
+
+`HALF_DAYS` (`['morning', 'afternoon']`, in the order of the day) is exported too.
+
+**Emits:** `HalfDayRange | undefined`.
+**Form wrapper:** `HalfDayRangeFormField` — `control` and `name`, see
+[forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
+**Storybook:** `Date & time/HalfDayRangeField` and `Date & time/HalfDayRangeField/Form field` · **Vue:** not yet (#2555 tracks the twin)
+
+---
+
 ## MiniMonth
 
 ![MiniMonth](../previews/date-time-minimonth.webp)

package/docs/components/primitives.md

@@ -1142,7 +1142,10 @@ page's: Radix writes `dir="ltr"` on the group unless told. A `segmented`
 group of 9 items or more has no sliding pill: the checked item paints its
 own.
 
-**Storybook:** `Primitives/ToggleGroup` · **Vue:** `ToggleGroup`, `ToggleGroupItem`
+Under a coarse pointer (a touch screen) every item is at least 44×44 px, in
+every variant, size and orientation, icon-only included.
+
+**Storybook:** `Primitives/ToggleGroup`, `Guides/Accessibility/Touch targets/Toggle group` · **Vue:** `ToggleGroup`, `ToggleGroupItem`
 
 ---
 

package/docs/guides/forms.md

@@ -523,6 +523,7 @@ or fails validation.
 | `DateRangeField` · `DateRangeFormField` | `DateRange \| undefined`: `{ from: Date \| undefined; to?: Date }` | `undefined` |
 | `TimeField` · `TimeFormField` | `Date \| undefined` (with `timeZone`, the true instant). With `asString`: `'HH:mm'`. While empty it shows its `placeholder` | `undefined` / `''` |
 | `DurationField` · `DurationFormField` | `number \| null`: total minutes (hours × 60 + minutes) | `null` |
+| `HalfDayRangeField` · `HalfDayRangeFormField` | `HalfDayRange \| undefined`: `{ start: { date, half }, end: { date, half } }`, `half` `'morning' \| 'afternoon'`; `undefined` while a day is missing; an end before the start is the value, refused by the wrapper's rule (`material.half-day-range.order`) | `undefined` |
 
 ### Selection & choice
 

package/docs/guides/i18n.md

@@ -397,6 +397,13 @@ dates", "Saisir les dates") on `DateRangeField`. Its hero says
 `material.dates.select-date` ("Select date", "Choisir la date") while the date
 is empty, `material.dates.select-dates` on `DateRangeField`, and the Cancel of
 a date-time picker reads `material.buttons.cancel` ("Cancel", "Annuler").
+`HalfDayRangeField` names its ends `material.dates.start` / `end` and its two
+halves `material.half-day-range.start-half` ("Start half-day", "Demi-journée de
+début") and `end-half` ("End half-day", "Demi-journée de fin"); the toggles read
+`material.half-day-range.morning` ("Morning", "Matin") and `afternoon`
+("Afternoon", "Après-midi"), and an end before the start says
+`material.half-day-range.order` ("The end cannot be before the start.", "La fin
+ne peut pas précéder le début.").
 `DateRangeField`'s preset list is a group named by
 `material.date-range-field.presets` ("Presets", "Plages prédéfinies"); its
 built-in presets read `material.date-range-field.preset.today`,

package/docs/guides/theming.md

@@ -1167,7 +1167,7 @@ are, without growing what is painted (nothing changes for a mouse):
   `trailing` button of a `TextField`), an autocomplete chip's remove button
   (padding the background is clipped out of, with a negative margin, so the
   chip and the drawn disc keep their size), and a table's select-all and
-  row-select checkboxes, which sit in a 44x44 `<label>` that toggles them.
+  row-select checkboxes, which sit in a 44x44 `<label>` that toggles them, `AppBreadcrumb` and `BreadcrumbLink` crumbs (at every width), the `FilterBar` / `ServerTable` search input (at both densities), and the move up / move down buttons of `RepeatableGroup` and `ChoiceListFormField` (`reorderable`).
 - **The label or row that toggles it is 44px tall** (and at least 44px wide):
   a `Checkbox` with a `label`, a `Switch` with a `placeholder` (its row), and
   a `RadioGroup` option. The box itself stays 20px or 32px: a finger anywhere

package/docs/roadmap.md

@@ -167,6 +167,7 @@ version they shipped in, and planned entries may name the major they target.
   pill. What changes on upgrade:
   [The field look (2.x)](guides/field-look-2-x.md)
 - **`TotalsList`** — the on-screen `PrintTotals` (#2490): React only for now; Vue twin is #2492.
+- **`MarkingList`** — people in rows with a shared segmented choice, a detail slot, locked rows, "set remaining to" and a live tally (#2547): React only for now; Vue twin is #2549.
 
 ## Next
 
@@ -254,8 +255,6 @@ version they shipped in, and planned entries may name the major they target.
   slot; the bar's `views` slot is planned with it. They are meant to replace
   the legacy `FilterPresets`. Tracked in [#1876](https://github.com/softistx/nxgt-material/issues/1876).
 
-- **Cursor trail cap** — `ServerTable` and `PageFooter` keep cursor URLs short: the trail is encoded once and capped by `maxTrail` (20 by default) with an exact page count, and `totalCount` becomes optional for APIs that do not count.
-
 ## Later
 
 - **A lighter first load for the app shell** — `ActivityLayout` pulls about
@@ -380,6 +379,12 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Cursor trail cap** — `ServerTable` and `PageFooter` keep cursor URLs short:
+  each trail entry is encoded once and the trail is capped by `maxTrail` (20 by
+  default, a prop on each) behind a counted cut mark, so the "21–40 of N" range
+  stays exact; Previous from the cut goes back to the first page. (`ServerTable`'s
+  `totalCount` was already optional, with no range then; shipped earlier.)
+
 - **App shell header refresh: the TopAppBar family (next minor)** — `TopAppBar`
   takes four sizes (`small`, `medium-flexible`, `large-flexible`, `search`), an
   `align`, a `title` that is the page's `h1` with a `subtitle`, and a collapse

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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. */

package/package.json

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