@nxgt/material 3.14.0 → 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/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/troubleshooting.md

@@ -1975,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

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.14.0",
+	"version": "3.15.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"