@nxgt/material 3.13.1 → 3.15.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-D_Gz7wgr.js";
+import { t as e } from "./public-Bj3rGSfS.js";
 import { configurePdfReader as t } from "@nxgt/material-core/pdf-reader";
 export { e as PdfReader, t as configurePdfReader };

package/dist/{public-D_Gz7wgr.js → public-Bj3rGSfS.js}

@@ -6,7 +6,7 @@ import { c as i, i as a, l as o, n as s, o as c, s as l } from "./dist-lmHmz_bu.
 import { a as u, o as d } from "./tooltip-CkttDIab.js";
 import { i as f } from "./dist-C4wtXCjf.js";
 import { r as p, t as m } from "./in-dialog-Vwkyp-M5.js";
-import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-rOMjlKJ7.js";
+import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-YHZJjDrI.js";
 import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-BEyP-A0J.js";
 import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-CVQBYp4K.js";
 import { t as N } from "./use-material-translation-DGeVp-qP.js";

package/dist/{use-chat-composer-P4GxmCHa.js → use-chat-composer-CoXmJCkr.js}

@@ -7,7 +7,7 @@ import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m } fro
 import { _ as h, a as g, g as _, h as v, m as y, o as b, p as x, t as S, v as C, y as w } from "./tooltip-CkttDIab.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-C4wtXCjf.js";
 import { i as A, n as ee, t as j } from "./in-dialog-Vwkyp-M5.js";
-import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-rOMjlKJ7.js";
+import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-YHZJjDrI.js";
 import { A as be, C as xe, D as Se, E as Ce, O as we, S as Te, T as Ee, _ as De, a as Oe, b as ke, d as Ae, f as je, g as Me, h as Ne, i as Pe, k as Fe, l as Ie, m as Le, n as Re, o as ze, p as Be, r as Ve, s as He, t as Ue, u as We, v as Ge, w as Ke, x as qe, y as Je } from "./floating-ui.dom-KkZSW8_E.js";
 import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-BEyP-A0J.js";
 import { a as ut, i as dt, n as ft } from "./field-blur-context-Cft9s7Hg.js";
@@ -36,7 +36,7 @@ import { n as an } from "./use-slice-reducer-BGkeGtML.js";
 import { t as on } from "./browser-only-DQ94lWF8.js";
 import { t as sn } from "./compose-refs-DZ0iIVF-.js";
 import { n as cn, r as ln, t as un } from "./chip-BZu-bvAJ.js";
-import { n as dn, t as fn } from "./icon-badge-_tY1MwU9.js";
+import { n as dn, t as fn } from "./icon-badge-C0TGvF9o.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
 import { t as mn } from "./empty-state-ZtqqpX0S.js";
 import { t as hn } from "./skeleton-DSdtr2qc.js";
@@ -1324,7 +1324,7 @@ function xu({ className: e, ...t }) {
 function Su({ className: e, ...t }) {
 	return /* @__PURE__ */ G("kbd", {
 		"data-slot": "kbd",
-		className: n("pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1 font-mono text-[10px] font-medium text-muted-foreground", e),
+		className: n("pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1 font-mono text-[10px] font-medium text-muted-foreground", "in-[[data-slot=button][data-variant=filled]]:border-current/40 in-[[data-slot=button][data-variant=filled]]:bg-current/15 in-[[data-slot=button][data-variant=filled]]:text-inherit", e),
 		...t
 	});
 }
@@ -7969,7 +7969,7 @@ function Hy({ slot: e, values: t, getOptionValue: r = (e) => e.value, getOptionL
 		ref: o,
 		"data-slot": e ?? "autocomplete-field",
 		"data-mode": a.mode,
-		className: n("grid w-full gap-1.5", a.className),
+		className: n("grid w-full content-start gap-1.5", a.className),
 		children: [
 			/* @__PURE__ */ G(dt, {
 				id: c,
@@ -8432,7 +8432,7 @@ function ub({ group: e, name: t, slot: r, className: i, contentClassName: a, inl
 	return /* @__PURE__ */ K("div", {
 		"data-slot": r,
 		"data-pw": t ?? r,
-		className: n("grid gap-1 w-full", i),
+		className: n("grid content-start gap-1 w-full", i),
 		...l,
 		...d,
 		ref: u,
@@ -9542,7 +9542,7 @@ function kx({ error: e, helperText: t, label: r, className: i, placeholder: a, m
 	return /* @__PURE__ */ K("div", {
 		ref: m,
 		"data-slot": "textarea-field",
-		className: n("grid w-full gap-1.5", i),
+		className: n("grid w-full content-start gap-1.5", i),
 		children: [
 			r && /* @__PURE__ */ G(dt, {
 				withAsterisk: p.required,
@@ -12073,7 +12073,7 @@ function GC({ id: e, value: t, defaultValue: r = "", onChange: i, onValueChange:
 	return /* @__PURE__ */ K("div", {
 		"data-slot": "search-field",
 		"data-pw": m ?? "search-field",
-		className: n("grid w-full gap-1.5", h),
+		className: n("grid w-full content-start gap-1.5", h),
 		children: [
 			l && /* @__PURE__ */ G(dt, {
 				htmlFor: ee,

package/docs/components/data-display.md

@@ -368,7 +368,7 @@ reads as a status (a stronger container of the tone, the label in the tone's
 text colour, 4.5:1 or more on the page and in a card; the `outlined` hairline
 and the `tag` dot still read `--chip-tone`, not the tone channel); `tag`
 a smaller tag led by a colour dot; `dashed` a muted "add" pill. 28px tall,
-24px with `size="sm"`. Selected (`active`, or `aria-pressed` on a toggle
+24px with `size="sm"`, 44px with `size="lg"`. Selected (`active`, or `aria-pressed` on a toggle
 chip) takes a primary tint and a primary edge, and a pressed toggle with
 nothing leading draws a check. The label is truncated as one piece; the ✕
 and `trailing` stay whole.
@@ -397,7 +397,7 @@ import { Avatar, Chip } from '@nxgt/material/components';
 | `variant` | `'outlined' \| 'tonal' \| 'filled' \| 'tag' \| 'dashed'` | `'outlined'` | the look: hairline, soft (`tonal` and `filled`), tag, or a muted dashed "add" pill that turns solid once `active` or pressed. `ghost` (soft) and `link` (hairline) are still accepted, deprecated |
 | `active` | `boolean` | — | selected: primary tint and edge |
 | `aria-pressed` | `boolean` | — | a toggle chip: selected while pressed, with a check when nothing leads |
-| `size` | `'default' \| 'sm'` | `'default'` | 28px or 24px; every target stays at least 24px |
+| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | 28px, 24px, or `lg`, a 44px box at every pointer (the touch target); every target stays at least 24px |
 | `color` | `'default' \| 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'` | neutral | tone: the edge (outlined), the fill and label (tonal, `filled`: a status look) or the dot and tint (tag). A `tag` without `color` (or with `default`) draws no dot |
 | `onDismiss` | `() => void` | — | adds the ✕ button, named "Remove {label}" (`material.chip.dismiss-label`), `{label}` being the text `label` shows, a node's included; "Remove" when it shows none; the ✕ is drawn 18px (16px small) with a 24px target |
 | `dismissLabel` | `string \| ((label: string) => string)` | — | names the ✕ instead of "Remove {label}": a string as is, or a function of the text the chip shows |

package/docs/components/data-table-filter-and-lists.md

@@ -679,6 +679,7 @@ type Student = { id: string; name: string; level: string };
 const PAGE_SIZE = 20;
 // Module scope: the loader and the page read the same URL the same way.
 const sorting = createSorting({ name: 'name', level: 'level' }, { id: 'name', desc: false });
+// A GraphQL API with an ASC / DESC enum: add { direction: (d) => d.toUpperCase() as 'ASC' | 'DESC' } as the third argument.
 const YEAR = [{ field: 'year', op: 'is', values: ['2026'], reason: 'This school year' }] as const;
 
 export async function loader({ request }: Route.LoaderArgs) {

package/docs/components/feedback-and-status.md

@@ -222,8 +222,12 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 | `onConfirm` | `() => void \| Promise<void>` | required | awaited with the dialog open and both buttons disabled; closes on success; on a throw or rejection the dialog stays open and shows the error's message, or the translated `material.confirm-dialog.failed` ("The action failed.") when it has none |
 | `variant` | `'default' \| 'destructive'` | `'default'` | `destructive` paints the confirm button `error` |
 | `loading` | `boolean` | `false` | disables both buttons and shows the translated `material.confirm-dialog.processing` label, as a pending `onConfirm` does |
+| `confirmDisabled` | `boolean` | `false` | disables the confirm button, for example while an error of yours stands |
+| `lockOnRefusal` | `boolean` | `false` | once `onConfirm` has refused (thrown), the confirm button stays disabled while its error shows, so a retry that cannot succeed is not invited; Cancel stays enabled. The error clears when the dialog closes |
 | `confirmLabel` / `cancelLabel` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
 
+On a phone (below 640 px) the footer stacks. A `destructive` dialog puts Cancel first and the destructive action last; a default one keeps the action on top.
+
 `ConfirmDialog` opens with its Cancel focused, so Enter cancels. On closing
 it hands the focus back to what opened it, or to the menu's trigger when
 that was a `DropdownMenuItem` (gone by then); `Dialog`, `Sheet` and

package/docs/components/overlays-and-menus.md

@@ -131,7 +131,7 @@ export function Terms() {
 | `asChild` (`DialogTrigger`) | `boolean` | **`true`** | the trigger is its child — pass one element, usually a `Button` |
 | `variant`, `color` (`DialogClose`) | as `IconButton` | `'ghost'` | a top-right X button, named "Close" (`material.buttons.close`, translated) while it shows only the icon; text children or an `aria-label` name it instead, and icon-only children leave it unnamed; children replace the X |
 | `size` (`DialogContent`) | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | its width from 640 px up: 384, 512, 672, 896 px, or the screen less 2rem a side |
-| `mobilePresentation` (`DialogContent`) | `'dialog' \| 'bottom-sheet' \| 'fullscreen'` | `'dialog'` | below 640 px: a centred dialog, a sheet that springs up from the bottom edge (rounded top corners), or the whole screen |
+| `mobilePresentation` (`DialogContent`) | `'dialog' \| 'bottom-sheet' \| 'top' \| 'fullscreen'` | `'dialog'` | below 640 px: a centred dialog, a sheet that springs up from the bottom edge (rounded top corners), a dialog pinned under the top edge, or the whole screen |
 | `scrim` (`DialogContent`, `SheetContent`, `DrawerContent`) | `'dim' \| 'blur'` | `'dim'` | the scrim behind; `blur` also blurs the page a little |
 
 The look lives in the stylesheet (`nxgt-dialog`, `nxgt-scrim`), under the
@@ -678,6 +678,7 @@ children and they replace that, as before.
 | `alwaysRender` (`CommandSeparator`) | `boolean` | `false` | the separator is purely visual (`role="presentation"`, hidden from assistive technology) and hidden while the user searches; `true` keeps it visible then |
 | `shouldFilter` (`Command`) | `boolean` | `true` | `false` when you filter the items yourself (server search) |
 | `title` / `description` (`CommandDialog`) | `string` | `"Command Palette"` / `"Search for a command to run..."` (translated) | the dialog's title and description, inside the dialog and visually hidden |
+| `mobilePresentation` (`CommandDialog`) | `'dialog' \| 'top' \| 'fullscreen'` | `'top'` | below 640 px: pinned under the top edge (so the input and the results stay above the on-screen keyboard), the whole screen, or the centred modal it was before |
 | `open`, `onOpenChange` (`CommandDialog`) | as `Dialog` | — | `CommandDialog` takes every `Dialog` prop |
 
 `CommandDialog` does not bind a keyboard shortcut; listen for ⌘K yourself and

package/docs/components/primitives.md

@@ -526,6 +526,8 @@ import { Kbd, KbdShortcut } from '@nxgt/material/components';
 | --- | --- | --- | --- |
 | `keys` (`KbdShortcut`) | `string[]` | — (required) | one `Kbd` per key; `mod`, `shift` and `alt` become `⌘ ⇧ ⌥` on Apple platforms, `Ctrl Shift Alt` elsewhere |
 
+Inside a filled `Button` the key, its border and the `+` between keys take the button's own text colour, so the shortcut keeps the contrast of the fill.
+
 `Kbd` takes the props of `<kbd>`. `shortcutGlyph(key)` gives one glyph on its own.
 
 **Storybook:** `Primitives/Kbd` · **Vue:** `Kbd`, `KbdShortcut`

package/docs/components/selection-and-choice.md

@@ -328,6 +328,8 @@ when nothing matches. Options with a `group` are listed under its header
 with their count, filtered within it (a group with no match goes); a
 `description` is a muted line under the label, in the list only.
 
+Once an option is picked, a round "Clear" button (`material.combobox.clear`, "Effacer" in French) appears at the end of the box, also in `ComboboxFormField`. It is a real button, named and exposed to assistive technology (`getByRole('button', { name: 'Clear' })`), described by the field's label, and kept out of the tab order like the other clearable fields: the keyboard clears with Backspace or by selecting the text and deleting it.
+
 ```tsx
 import { ComboboxField } from '@nxgt/material/components';
 import { useState } from 'react';
@@ -785,7 +787,7 @@ export function Topics() {
 | `deselectable` | `boolean` | `false` | `single` only: pressing the chosen chip clears it |
 | `max` / `min` | `number` | — | `multiple` only: `max` blocks the other chips once reached and speaks "{count} of {max} chosen"; `min` is a hint only |
 | `options` | `{ value; label; icon?; count?; description?; disabled?; disabledReason? }[]` | — | the chips; `count`: see [option counts](#option-counts) |
-| `size` | `'default' \| 'sm'` | `'default'` | the chip's size (28px or 24px) |
+| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | the chip's size: 28px, 24px, or `lg`, a 44px box at every pointer (a coarse pointer already gets a 44px box at any size) |
 | `name` | `string` | — | put on every chip (`ChipGroupFormField` passes its field `name`), so `document.getElementsByName(name)` finds the group's chips in order |
 | `label`, `helperText`, `error`, `required`, `disabled`, `id` | | — | the question and its help or error text, the required mark, disabling every chip, the group's `id` |
 | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | wrapping row or a column (each chip as wide as its label); in single mode it sets the `radiogroup`'s `aria-orientation` (ARIA allows none on a `group`), and every arrow key moves in both axes either way (the chips wrap) |

package/docs/guides/server-lists-url.md

@@ -5,7 +5,10 @@ it and fetches the rows, the page shows the `Filter` bar with the same query,
 and an edit in the bar writes the URL back. A shared link, a reload and the
 browser's Back button all land on the same list.
 
-It uses the URL codec of `@nxgt/material-core/filter` and React Router's
+It uses the URL codec (`defineFilterModel`, `parseFilterQuery`,
+`serializeFilterQuery`), which `@nxgt/material/components` re-exports (it is
+also in `@nxgt/material-core/filter`, so the examples below work with either
+import) and React Router's
 framework mode. Any router works the same way: the codec takes and returns
 `URLSearchParams`. If you render the list with
 [`ServerTable`](../components/data-table-filter-and-lists.md#servertable), it
@@ -58,6 +61,12 @@ track and an integer beyond `Number.MAX_SAFE_INTEGER`, and it keeps the first
 readable condition of a field. Whatever a
 visitor types into the address bar, you get a valid `FilterQuery`.
 
+A list condition with one unknown value (`?status=a&status=zzz`, a stale or
+hand-edited link) is dropped whole. To keep the values it reads and drop only
+the unknown one, pass `keepKnownValues: true`
+(`parseFilterQuery(params, STUDENT_FILTERS, { locked, keepKnownValues: true })`);
+a condition with no readable value left is still dropped.
+
 ```ts
 // app/routes/students.tsx
 import { effectiveConditions, parseFilterQuery } from '@nxgt/material-core/filter';
@@ -142,6 +151,11 @@ export default function Students({ loaderData }: Route.ComponentProps) {
   re-encodes them (`f=level%3Ain%3ACE1%2CCE2`), which parses back the same. To
   compare a URL you wrote with the one the router hands back, use
   `paramsKey(a) === paramsKey(b)`.
+- **Standard encoding.** If your list URLs are already written the
+  `URLSearchParams` way (`status=a%2Cb`), pass `encoding: 'standard'` to
+  `serializeFilterQuery` (and to `tableFilters` / `withoutFilters`): the params
+  returned are a plain `URLSearchParams`, so `toString()` encodes `:` and `,`.
+  Both forms parse back the same.
 - **Dates and times** stay relative in the URL (`f=term:between:this-month`),
   so a bookmark keeps meaning "this month".
 

package/docs/troubleshooting.md

@@ -120,6 +120,7 @@ words in your error.
 - [The list loads again when the phone filter sheet closes](#the-list-loads-again-when-the-phone-filter-sheet-closes)
 - [`FilterSheetTrigger must be used inside <Filter> or <ServerTable filter>`](#filtersheettrigger-must-be-used-inside-filter-or-servertable-filter)
 - [A condition in the URL is missing from the filter](#a-condition-in-the-url-is-missing-from-the-filter)
+- [The filter URL is not encoded like URLSearchParams](#the-filter-url-is-not-encoded-like-urlsearchparams)
 - [A refused or reset edit stays in the filter bar](#a-refused-or-reset-edit-stays-in-the-filter-bar)
 - [`defineFilterModel: field "level" cannot use "gt" on a select field`](#definefiltermodel-field-level-cannot-use-gt-on-a-select-field)
 - [`@nxgt/material-core/filter: unknown time zone "…", using the runtime's`](#nxgtmaterial-corefilter-unknown-time-zone--using-the-runtimes)
@@ -1974,6 +1975,26 @@ a few frames after the alert has gone) and look it up by selector rather
 than by role: the closing alert still hides the page from the accessibility
 tree.
 
+### A `ConfirmDialog` keeps offering a refused action
+
+When `onConfirm` throws, the dialog shows the error and the confirm button
+stays active, so the user can retry. If a retry cannot succeed (the item is
+still referenced), lock it:
+
+```tsx
+<ConfirmDialog variant="destructive" lockOnRefusal onConfirm={remove} … />
+```
+
+Cancel stays enabled. `confirmDisabled` is the switch for your own condition.
+
+### Fields in a two-column row sit at different heights
+
+A field is a grid of a label and a control. In earlier versions its rows stretched when a
+neighbour in the same row was taller (a helper or error text under it), so the
+shorter field's control sank by half the difference. Fields now keep their rows
+at the top (`content-start`); upgrade, and drop any `mt-*` or `items-end`
+workaround. A `DateField`'s tonal fill is deliberate and not a misalignment.
+
 ## Navigation
 
 ### A `ListTile` link shows two chevrons
@@ -2233,6 +2254,26 @@ const query = parseFilterQuery(params, STUDENT_FILTERS, { locked: LOCKED });
 const asWritten = parseFilterQuery(params, STUDENT_FILTERS);
 ```
 
+A list condition (`in`, a `repeat` param) with one unknown value
+(`?status=a&status=zzz`) is dropped whole by default. To keep `a` and drop only
+`zzz`, parse with `{ keepKnownValues: true }`.
+
+### The filter URL is not encoded like URLSearchParams
+
+**When:** links or tests of a list that already published its URLs with
+`URLSearchParams` (`status=a%2Cb`) now differ in text from what
+`serializeFilterQuery(...).toString()` or `tableFilters(...).withoutFilters(...)`
+writes.
+**Why:** their params leave `:` and `,` raw (legal in a query) so the URL reads
+well; `URLSearchParams` encodes them. Both parse back the same.
+**Fix:** pass `encoding: 'standard'` (to `serializeFilterQuery`, or in the
+options of `withoutFilters` / `tableFilters`) for a plain `URLSearchParams`:
+
+```ts
+serializeFilterQuery(query, MODEL, { encoding: 'standard' }).toString();
+// status=a&status=b&f=level%3Ain%3ACE1%2CCE2
+```
+
 ### `?archived=0` now shows every row
 
 **When:** a stored link or bookmark with a `style: 'flag'` alias at `0`

package/lib/components/ui/display/chip/chip.css

@@ -1,6 +1,6 @@
 /* Chip: what the three looks share (data-look hairline, soft, tag). Sizes:
- * default 28px, sm 24px (both at least the 24px target of WCAG 2.5.8). The
- * label truncates as one piece; the ✕ is drawn small, its target is 24×24
+ * default 28px, sm 24px (both at least the 24px target of WCAG 2.5.8), lg
+ * 44px (the touch target). The label truncates as one piece; the ✕ is drawn small, its target is 24×24
  * through ::after, and it has its own focus ring. */
 @layer components {
 	.nxgt-chip {
@@ -50,6 +50,16 @@
 		--chip-gap: 0.25rem;
 		--chip-x: 1rem;
 	}
+	/* lg: a 44px box at every pointer (the touch target, #1529). */
+	.nxgt-chip[data-size="lg"] {
+		--chip-h: 2.75rem;
+		--chip-px: 1rem;
+		--chip-font: 0.9375rem;
+		--chip-icon: 1rem;
+		--chip-gap: 0.375rem;
+		--chip-x: 1.5rem;
+		min-width: 2.75rem;
+	}
 	button.nxgt-chip,
 	.nxgt-chip > button[data-slot="chip-body"] {
 		cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.13.1",
+	"version": "3.15.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -357,7 +357,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.30.1",
+		"@nxgt/material-core": "^0.31.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",