@nxgt/material 3.86.2 → 3.88.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nxgt/material
 
+## 3.88.0
+
+### Minor Changes
+
+- [#2556](https://github.com/softistx/nxgt-material/pull/2556) [`e04413f`](https://github.com/softistx/nxgt-material/commit/e04413ff7214dd57d0972bfd487c0996ec67bb31) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `HalfDayRangeField` and `HalfDayRangeFormField` (React Hook Form), exported from `@nxgt/material/components`: a range whose two ends are each a day plus a half, morning or afternoon, for absences and closures counted to the half day. The value is `{ start: { date, half }, end: { date, half } }` (`half` is `'morning' | 'afternoon'`, `date` the local midnight of the day), ordered on the half. `onValueChange` gets `undefined` while a day is missing and the range as soon as both days are set, even when the end is before the start (the field shows "The end cannot be before the start.", marks the halves `aria-invalid` and announces it; `HalfDayRangeFormField` adds a `validate` rule so the form refuses it, without a resolver: with zod, use `z.custom<HalfDayRange>().refine(isHalfDayRangeOrdered, …)`; a `rules.validate` of your own is kept beside it). Controlled (`value`) or uncontrolled (`defaultValue`); a reset of `value` to `undefined` empties the days unless the emitted value was already `undefined` (then give the field a `key` that changes). `minDate`, `maxDate` and `disabledDays` apply to both ends, and the end's calendar starts at the start's day. Labels come from `material.half-day-range.*` and `material.dates.start` / `end` (en and fr). `compareHalfDays`, `isHalfDayRangeOrdered`, `halfDaysIn` and `HALF_DAYS` are exported with the `HalfDay`, `HalfDayEnd` and `HalfDayRange` types. Not available in `@nxgt/material-vue` yet ([#2555](https://github.com/softistx/nxgt-material/issues/2555)). Fixes [#2546](https://github.com/softistx/nxgt-material/issues/2546).
+
+## 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

@@ -702,6 +702,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-timefield.webp" width="120" alt="TimeField"> | [`TimeField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#timefield), `TimeStringField`, `TimeFormField` | A time typed in segments, with a button that opens a `TimePicker` in a popover, or in a bottom sheet on a phone. A tonal box; `size="sm"` is compact, `TimeStringField` takes an `HH:mm` string. | `TimeField`, `TimeFormField`; `TimeStringField`: — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-timepicker.webp" width="120" alt="TimePicker"> | [`TimePicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#timepicker) | Hours and minutes as big tiles with steppers, an AM / PM pair and quick minutes (columns with `variant="columns"`), 12- or 24-hour by language. | `TimePicker` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-durationfield.webp" width="120" alt="DurationField"> | [`DurationField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#durationfield) · `DurationFormField` | Hours and minutes combined into a total in minutes, typed on one line, "1 h 29 min", with one −/+ pair for the focused part (`variant="fields"` for the two number fields). | `DurationField`, `DurationFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-halfdayrangefield.webp" width="120" alt="HalfDayRangeField"> | [`HalfDayRangeField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#halfdayrangefield) · `HalfDayRangeFormField` | A range whose two ends are each a day plus morning or afternoon, ordered on the half, for absences and closures counted to the half day. | — (later, #2555) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-minimonth.webp" width="120" alt="MiniMonth"> | [`MiniMonth`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#minimonth) | Compact month navigator: today ringed, a week band, event dots, a keyboard date grid. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-nowindicator.webp" width="120" alt="NowIndicator"> | [`NowIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#nowindicator) | The current-time line of a day schedule, moving each minute. CSP-safe. | — |
 
@@ -792,6 +793,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-CEGs7LMN.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-Cqzvj9R0.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-CR0M95Jq.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-DoVsjUff.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-h9hXBEQB.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-DcW21pN1.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-Dn_KL0b0.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-CdoBFtWx.js";
+import { t as a } from "./button-h9hXBEQB.js";
+import { t as o } from "./use-material-translation-BdrItuwY.js";
+import { t as s } from "./icon-button-DE1EcO2-.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-CpTpT4vE.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-rfvJKxB4.js"),
+	pos: () => import("./pos-variant-Bs5BUB1L.js"),
+	programmer: () => import("./programmer-variant-B1eI1fd0.js"),
+	financial: () => import("./financial-variant-CYgRZzKT.js"),
+	conversion: () => import("./conversion-variant-Cf0sEmnS.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-h9hXBEQB.js";
+import { t as n } from "./use-material-translation-BdrItuwY.js";
+import { t as r } from "./icon-button-DE1EcO2-.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-DkfTv_ft.js";
+import { r as l, t as u } from "./currency-field-cwC7cqUE.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-Dn_KL0b0.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-DMFptsDf.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-CCy1Me0h.js";
+import { t as e } from "./use-material-translation-BdrItuwY.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-Dn_KL0b0.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-h9hXBEQB.js";
+import { t as i } from "./use-material-translation-BdrItuwY.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-C-RAjar5.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-C-RAjar5.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-DcW21pN1.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-BdrItuwY.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-DApeIOZ3.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-xUUE5X6T.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-CZ1lJXZZ.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-BdrItuwY.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-CGtYfc1l.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-CZ1lJXZZ.js";
+import { t as o } from "./use-material-translation-BdrItuwY.js";
+import { i as s, n as c, o as l } from "./code-language-items-CGtYfc1l.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-DApeIOZ3.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-CGtYfc1l.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-xUUE5X6T.js";
+import { t as n } from "./use-material-translation-BdrItuwY.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. */